flex布局：
display:flex;(-webkit)
两轴：
1.主轴（main axis)：子元素垂直方向上的中点垂直线；
2.纵轴（cross axis)：子元素水平方向上的中点垂直线；
属性：
- 父元素中：1.flex-direction:子元素在主轴上的排列顺序
（可选值:row/row-reverse/column/column-reverse）
2.flex-wrap:是否换行(可选值：nowrap/wrap/wrap-reverse)
3.flex-flow:1和2的缩写形式
4.justify-content:子元素在主轴上的对齐方式
（可选值:flex-start/flex-end/center/space-between/space-around）
5.align-items:子元素在交叉线上的对齐方式.
(可选值:flex-start/flex-end/space-between/space-around/center)
6.align-content:当子元素中有多于一根轴线时有效，用于设置子元素的对齐方式.
(可选值:flex-start/flex-end/center/space-between/space-around/stretch)
-子元素中: 1.align-self:单个元素自身的对齐方式；
（auto | flex-start | flex-end | center | baseline | stretch）
2.order:排列顺序，默认0；
3.flex-grow:放大比例，默认0；
4.flex-shrink:缩小比例，默认0；
5.flex-basis:占主轴的比例，默认auto
6.flex:order|flex-grow|flex-shrink|flex-basis(2-5的缩写）
