Flex是Flexible Box的缩写，简单来说就是弹性布局。任何一个元素都可以通过设display:flex来指定flex布局；行内元素使用display:inline-flex;设置成flex布局后，子元素的float、clear、vertical-align属性全部失效。采用flex布局的元素，称为flex容器，他所有子元素自动成为容器成员（flex Item），简称Item。
- flex容器的属性
（1）Flex-direction:决定Item排列的默认方向（称主轴)，可设置为：row\row-reverse\column\column-reverse。
（2）Flex-wrap：决定一条主轴排列不下，换行的方式。设置的值有：no-wrap\wrap\wrap-reverse
（3）Flex-flow属性是flex-direction和flex-wrap的简写形式，默认值是row no-wrap。
（4）Justify-content属性定义了Item在主轴上的对齐方式，设置的值有：flex-start\flex-end\center\space-between\space-around。
（5）Align-items定义属性在与主轴垂直的轴（称交叉轴）上的对齐方式。设置的值有：flex-start\flex-end\center\baseline\strench
（6）Align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。设置的值有：flex-start | flex-end | center | space-between | space-around | stretch;
- Item的属性
（1）order属性定义ITEM在主轴上的排序，数值越小越靠前
（2）flex-grow属性定义在flex容器充分的情况下，Item的放大比例。默认为0，即如果存在空间足够大，item空间不扩充。若所有Item的flex-grow都为1，则等分空间。如果一个item的flex-grow为2，其他item为1，则它所占空间是其他的2倍。
（3）flex-shrink属性定义在flex容器不足的情况下，Item的缩小比例，默认为1，若空间不足，item将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
（4）flex-basis属性定义基准或者初始的大小，浏览器根据这个属性计算主轴是否还有空余空间，默认值为auto，及item本身的大小。
（5）flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
（6）align-self允许单个项目与其他项目不对齐，可覆盖容器的align-items值。默认值为auto
