- Flex布局是Flexible Box 的缩写，意为“弹性布局”。
- 任何容器都可以指定为Flex布局（行内元素也可以）
- Webkit内核的浏览器，必须加上
-webkit前缀
- 设为Flex布局后，子元素的float、clear和vertical-align属性将会失效。
- 采用Flex布局的元素，称为Flex容器（flex container），子元素称为Flex项目（flex item）
- Flex布局的样式：
容器默认存在两根轴：
1. 水平的主轴（main axis）和垂直的交叉轴（cross axis）。
2. 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
3. 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。
单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
- Flex容器（flex container）的属性:
flex-direction：决定主轴的方向（项目的排列方式）
flex-wrap：如果一条轴线排不下，如何换行。
flex-flow：flex-direction和flex-wrap的缩写（默认 row nowrap）
justify-content：决定项目在主轴上的对齐方式
align-items：决定项目在交叉轴上如何对齐
align-content：决定了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
- Flex项目（flex item）的属性:
order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- 参考自：---> www.ruanyifeng.com/blog/2015/0…
- Flex布局实例：---> www.ruanyifeng.com/blog/2015/0…
