flex弹性布局
1.设置盒子的display属性为flex，或者line-flex，其对应还有六个css属性，分别为：
1）flex-direction：设置子元素的排列方式（row，column，row-reverse，column-reverse）
2）flex-warp：设置子元素的是否换行（nowarp，warp，warp-reverse）
3）flex-flow：flex-direction和flex-warp的缩写，默认为row nowarp
4）justify-content：设置子元素的水平排列方式（flex-start，flex-end，center，span-around，span-between）
5）align-items：设置子元素的垂直方式（flex-start，flex-end，center，stretch，baseline）
6）align-content：设置多个轴线的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）
\2. 对应的子元素项目也拥有自身的六个css属性，分别为：
1）order：设置元素的排列权重 值越大越在后
2）flex-grow：设置元素的放大比例
3）flex-shrink：设置元素的缩小比例
4）flex-basis：设置多余空间项目主轴所占比例空间
5）flex：flex-grow和flex-shrink和flex-basis的缩写方式 默认为0 1 auto
6）align-self：设置子元素自己的垂直排列方式，默认为盒子的align-items的值
:warning:：设置flex布局后，子元素的float，clear，vertical-align都无效