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 属性的简写属性。
示例
使第三个 Flex 项目不可增长 (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 属性指定 Flex 项目在 Flex 容器内的对齐方式。
align-self 属性会覆盖容器的 align-items 属性设置的默认对齐方式。
1
2
3
4
在这些示例中，我们使用了一个 200 像素高的容器，以更好地演示 align-self 属性
示例
将第三个 Flex 项目在容器中间对齐
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
示例
将第二个 Flex 项目在容器顶部对齐，第三个 Flex 项目在容器底部对齐
<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-self | 为 Flex 项目指定对齐方式（覆盖 Flex 容器的 align-items 属性） |
| flex | flex-grow、flex-shrink 和 flex-basis 属性的简写属性 |
| flex-basis | 指定 Flex 项目的初始长度 |
| flex-grow | 指定 Flex 项目在同一容器内相对于其他 Flex 项目的增长量 |
| flex-shrink | 指定 Flex 项目在同一容器内相对于其他 Flex 项目的收缩量 |
| order | 指定同一容器内 Flex 项目的顺序 |
