Flex实战一（概要）

任何一个容器可以指定Flex布局。.box{display: flex;}
行内元素也可以使用flex布局。 .box{display: inline-flex}
Webkit内核的浏览器，必须加上-webkit前缀
.box{display: -webkit-flex;/* Safari */ display: flex;}
设置为Flex布局后，子元素的float、clear和vertical-align属性将失效

项目默认沿主轴排列。单个项目占据的主轴控件叫main size，占据交叉轴空间叫做cross size

容器的属性：
flex-direction：属性决定主轴的方向（即项目的排列方向）。（左中右、上中下）
flex-wrap：属性定义，如果一条轴线排不下，如何换行
flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content：属性定义了项目在主轴上的对齐方式（左中右）
align-items：属性定义项目在交叉轴上如何对齐（上中下）
align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。