flex 弹性布局
浏览器：
Chrome 21+ Opera 12.1+ FireFox 22+ Safari 6.1+ IE 10+
Webkit内核的浏览器需要加前缀：.box{display:-webkit-flex};苹果的Safari浏览器。
设置了flex后 float 、clear 、vertical-align 失效。
基本：
水平主轴：main axis，垂直交叉轴：cross axis，他的子元素：flex-item，子元素主轴：main size，子元素交叉轴：cross size
容器的六个属性：(设置在父元素上)
一、
flex-driection:row|row-reverse|cloumn|cloumn-reverse;
· row：默认值，元素从左往右排列；
· row-reverse：元素从右往左排列；
· cloumn：元素从上往下排列；
·cloumn-reverse：元素从下往上排列；
默认挤在一行上面，子元素越多，每个子元素的宽就越小。
二、
flex-wrap:nowrap|wrap|wrap-reverse;
· nowrap：默认值，不换行；
· wrap：换行，第一行在上方；
· wrap-reverse：换行，第一行在下方；
此属性可以使子元素是否排列一行。
如果flex-driection属性是cloumn，则元素排成一列，wrap在左侧，wrap-reverse在右侧；
三、
flex-flow:<flex-dirsction> | | <flex-wrap>;
此属性是flex-dirsction和flex-wrap的缩写，默认值row nowrap；(单行显示，不换行)；
四、
justify-content:flex-start|flex-end|center|space-betwen|space-around;
· flex-start：子元素从左往右排列；
· flex-end：子元素从右往左排列；
· space-betwen：两端对齐，项目之间间隔都相等；
· space-around：每个项目之间的间隔相等，所以项目之间的间隔比两头的间隔要大。
控制子元素的交叉轴。
五、
align-items:flex-start|flex-end|center|baseline|stretch;
· flex-start：让子元素在父级元素顶部展示；
· flex-end：让子元素在父级元素底部展示；
· center：让子元素在父级元素的水平居中线上展示；
· baseline：让子元素的第一行字水平对齐；（以高度最高的子元素为基准）
· stretch：让子元素的高沾满整个父级的高，宽度不变；（子元素必须没有高度，或者为auto）
控制子元素的主轴。
六、
align-content:flex-start|flex-end|center|space-between|space-around|stretch;
· 定义了多跟轴线的对齐方式，如果只有一根轴线则不起作用；
· flex-start：子元素与父级交叉轴起点对齐；
· flex-end：子元素与父级与交叉轴终点对齐；
· center：子元素与父级与交叉轴中点对齐；
· space-between：与交叉轴两端对齐，轴线之间平均分布；
· space-around：每根轴线的两侧都相等，所以子级之间的间隔比两端大。
· stretch：轴线占满整个交叉轴。
控制子元素主轴和父元素交叉轴的对齐方式。
项目的六个属性：(设置在子元素上)
一、
order:<integer>
.item:nth-child(1){order:-1}
给子元素定义，数值越小越靠前（越靠上），默认值为0；
二、
fexd-grow:<number>
.item:nth-child(1){flex-grow:1}
给子元素定义，数值代表等分剩余宽度的份数，默认值0，当前子元素的宽度；
三、
felx-shrink:<number>
.item:nth-child(1){flex-shrink:1}
给子元素定义等比缩小。如果该子元素的 flex-shrink为0，其他元素都为1，则空间不足时缩小其他项目，该元素保持原大小；
四、
flex-basis:<length>|auto;
· length：定义该子元素所占的宽度，如果超出剩余宽度显示剩余宽度，没有超出就显示定义宽度；
· auto：项目本来的大小；
设置固定值或者百分比。
五、
flex:flex-grow、flex-shrink、flex-basis的简写，默认值0 1 auto，后两个属性可选；
· auto：（0，0，auto）
· none：（0，0，auto）
六、
align-self:auto|flex-start|flex-end|center|baseline|stretch;
· 给单独的子元素设置，属性除了auto和align-items属性一致；
· auto：继承父元素属性；
