CSS 柔性 项目
子元素（项目）
弹性容器的直接子元素自动成为弹性（flex）项目。
1
2
3
4
上面的元素代表灰色弹性容器内的四个蓝色弹性项目。
弹性项目的属性包括：
order 属性
这 order 属性指定弹性项目的顺序。
1
2
3
4
代码中的第一个弹性项目不必作为布局中的第一个项目出现。
订单值必须是数字，默认值为 0。
例子
这 命令 属性可以改变弹性项目的顺序：
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
亲自尝试 »
flex-grow 属性
这 flex-grow 属性指定弹性项目相对于其余弹性项目的增长量。
1
2
3
该值必须是数字，默认值为 0。
例子
使第三个弹性项目的增长速度比其他弹性项目快八倍：
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
亲自尝试 »
放置您的广告！
flex-shrink 属性
这 flex-shrink 属性指定弹性项目相对于其余弹性项目收缩的程度。
1
2
3
4
5
6
7
8
9
10
该值必须是数字，默认值为 1。
例子
不要让第三个弹性项目像其他弹性项目一样收缩：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
亲自尝试 »
flex-basis 属性
这 flex-basis 属性指定弹性项目的初始长度。
1
2
3
4
例子
将第三个弹性项目的初始长度设置为 200 像素：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
亲自尝试 »
flex 属性
这 flex property 是以下简写属性：flex-grow, flex-shrink， 和 flex-basis 特性。
例子
使第三个弹性项目不可增长（0），不可收缩（0），并且初始长度为 200 像素：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
亲自尝试 »
align-self 属性
这 align-self 属性指定灵活容器内选定项目的对齐方式。
这 align-self 属性将覆盖容器设置的默认对齐方式 align-items 财产。
1
2
3
4
在这些例子中，我们使用 200 像素高的容器，以更好地展示 align-self 财产：
例子
将第三个弹性项目与容器的中间对齐：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
亲自尝试 »
例子
将第二个弹性项目与容器顶部对齐，将第三个弹性项目与容器底部对齐：
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
亲自尝试 »
CSS Flexbox 项目属性
下表列出了所有 CSS Flexbox 项属性：
| 财产 | 描述 |
|---|---|
| 对齐自身 | 指定弹性项目的对齐方式（覆盖弹性容器的 align-items 属性） |
| 柔性 | flex-grow、flex-shrink 和 flex-basis 属性的简写属性 |
| 弹性基础 | 规定弹性项目的初始长度 |
| 弹性生长 | 指定弹性项目相对于同一容器内其他弹性项目的增长量 |
| 弹性收缩 | 指定弹性项目相对于同一容器内其他弹性项目的收缩量 |
| 命令 | 规定同一容器内弹性项目的顺序 |
