flex是css3新出的一种布局
设置display:flex后，子元素的float/vertical-align属性均会失效。
父盒子简称为容器，子元素简称为项目，以下：
容器属性：
1.flex-direction 展现方向
row/column/row-reverse/column-reverse
2.flex-wrap 是否折行
wrap/nowrap/wrap-reverse
3.flex-flow 1和2的统称
默认是row nowrap
4.justify-content 水平方向排列
flex-start/flex-end/center/space-between/space-around
5.align-items 垂直方向排列
flex-start/flex-end/center/strech/baseline
注意：当flex-direction设置从row变成column , jusitify-content和align-items的设置会反过来
项目属性
1.order 定义项目的顺序
默认是0
2.flex-grow 定义项目的放大比例
默认是0
3.flex-shrink 定义项目的缩小比例
默认是1
4.flex-basis 定义在分配多余空间时，项目所占空间
默认是auto
5.flex:2/3/4的统称
默认是0 1 auto
6.align-self 允许单个项目与其他项目不一样的对齐方式
可覆盖align-items
auto/flex-start/flex-end/center/baseline/stretch
兼容性写法
dispaly:flex
【
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox
】
flex-direction:column
【
-webkit-box-orient:vertical;
-webkit-flex-direction:colume;
-ms-flex-direction:column
】
flex:1
【
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1
】
align-items:center
【
-webkit-box-align:center;
-weblit-align-items:center;
-ms-flex-align:center
】
justify-content:center
【
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center
】
justify-content:space-between
【
-webkit-box-pack:justify;
-webkit-justify-conent:space-between;
-ms-flex-pack:justify
】