CSS3常规使用（9）：Flexbox弹性伸缩布局

扫描下面的二维码，“关注”我的百家号。

Flex布局是CSS3引入的一个新概念，主要是让容器有能力自适应地布局，让它的子元素能自动改变其宽度、高度，以适配所有终端设备的屏幕大小。也就是此前所说的响应式布局。Flex布局在屏幕和浏览器窗口大小改变时可以灵活调整布局，调整项目大小，控制元素在页面上的布局方向等。一起来看看这个神奇的Flex弹性伸缩布局吧。

1：设置弹性伸缩盒：

 display:flex; 将容器盒模型作为块弹性伸缩盒显示

display:inline-flex; 将容器盒模型作为内联级弹性伸缩盒显示

2：设置伸缩项目的子元素排列方式：

 flex-direction:column; 从上到下排列；

flex-direction:column-reverse; 从下到上排列；

flex-direction:row; 从左到右排列；

flex-direction:row-reverse; 从右到左排列；

3：设置无法换行时自动换行 多个子元素宽度超过盒子宽时，子元素换行

 flex-wrap:wrap; 无法容纳时自动换行；

flex-wrap:wrap-reverse; 无法容纳时自动换行，方向与wrap相反；

4：集合排列方向和控制换行的简写形式：

 flex-flow:row-reverse wrap; 从右到左排列；超出宽度就换行。

5：设置伸缩项目的水平对齐方式：

 justify-content:flex-start; 以起始点靠齐；

justify-content:flex-end; 以结束点靠齐；

justify-content:center; 以中心点靠齐；

justify-content:space-between; 两边对齐，平局分布

justify-content:space-around; 两边对齐，平局分布，但两端保留一半的空间

6：处理伸缩项目容器的额外空间（垂直对齐方式）

 align-items:flex-start; 顶部对齐，并清理下部额外空间

align-items:flex-end; 底部对齐，并清理上部额外空间

align-items:center; 以中心点对齐，并清理上下额外空间

align-items:baseline; 以基线为基准，清现额外空间

align-items:stretch; 默认。拉伸。不清理额外空间

7：单独清理某一个伸缩项目的额外（即：单独清理某一个子元素）

 align-self的值与align-items的一样。如：

align-self:center; 以中心点对齐，并清理上下额外空间

8：控制伸缩窗口的比例分配（对单个子元素操作）

例：盒子内有3个p子元素；

 p:nth-child(1){ flex:2; } 宽度占比2 （各占比数可随便设置）

p:nth-child(2){ flex:3; } 宽度占比3

p:nth-child(3){ flex:2; } 宽度占比2

3个子元素总占比数为 2+3+2 = 7 ；第一个元素宽度占比2/7；第二个占比3/7；第三个2/7

9：控制各伸缩项目出现的顺序：（对单个子元素操作）

例：盒子内有3个p子元素；

 p:nth-child(1){ order:2; } 让第1个子元素显示在第2个位置上；

p:nth-child(2){ order:3; } 让第2个子元素显示在第3个位置上；

p:nth-child(3){ order:1; } 让第3个子元素显示在第1个位置上；