CSS Flex 项目
子元素（项目）
Flex 容器的直接子元素会自动成为灵活（flex）项目。
1
2
3
4
上面的元素表示灰色 Flex 容器内有四个蓝色 Flex 项目。
Flex 项目属性是
order 属性
order 属性指定 Flex 项目的顺序。
1
2
3
4
代码中的第一个 Flex 项目不必在布局中作为第一个项目出现。
order 值必须为数字，默认值为 0。
示例
order 属性可以更改 Flex 项目的顺序
<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 属性指定 Flex 项目相对于其他 Flex 项目的增长程度。
1
2
3
该值必须为数字，默认值为 0。
示例
使第三个 Flex 项目的增长速度比其他 Flex 项目快八倍
<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 属性指定 Flex 项目相对于其他 Flex 项目的缩小程度。
1
2
3
4
5
6
7
8
9
10
该值必须为数字，默认值为 1。
示例
不要让第三个 Flex 项目像其他 Flex 项目那样缩小
<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 属性指定 Flex 项目的初始长度。
1
2
3
4
示例
将第三个 Flex 项目的初始长度设置为 200 像素
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
flex 属性
flex 属性是 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 弹性盒项目属性
下表列出了所有 CSS 弹性盒项目属性
| 属性 | 描述 |
|---|---|
| align-self | 指定弹性项目的对齐方式（覆盖弹性容器的 align-items 属性） |
| flex | flex-grow、flex-shrink 和 flex-basis 属性的简写属性 |
| flex-basis | 指定弹性项目的初始长度 |
| flex-grow | 指定弹性项目相对于同一容器内其他弹性项目的增长程度 |
| flex-shrink | 指定弹性项目相对于同一容器内其他弹性项目的收缩程度 |
| order | 指定同一容器内弹性项目的顺序 |
