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个位置上；
