CSS3 Flex 项目
子元素（项目）
flex 容器的直接子元素会自动成为弹性（flex）项目。
1
2
3
4
上面的元素代表一个灰色 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>
<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。
实例
使第三个弹性项目的增长速度比其他弹性项目快八倍：
<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>
<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
该值必须是数字，默认值是 0。
实例
不要让第三个弹性项目收缩得与其他弹性项目一样多：
<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>
<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
实例
将第三个弹性项目的初始长度设置为 200 像素：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
<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>
<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>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>
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
