flex(弹性)布局：********
以往的网页布局(layout)方式：
方式：基于盒模型，依赖display属性+margin属性+position属性+float属性。特殊布局比较麻烦(比如元素的垂直居中)
2009年w3c推出flex布局。可以简便、完整，响应式的实现网页布局(IE10以上支持)。任何元素都可以使用
一、flex是什么？
flex：flexible box 弹性布局(可以给盒子提供最大的灵活性)
任何容器都可以指定为flex布局
.box{display:flex;}
webkit内核：加浏览器私有前缀 -webkit前缀
.box{display:-webkit-flex;display:flex;}
注意：给盒子设置flex属性之后，资源的float/clear/vertical-align将失效
二、基本概念
2.1：采用flex布局的元素，称为flex容器(flex container)称为容器。他的所有子元素自动成为容器的成员，称为flex项目(flex item)。
2.2：容器默认存在两根轴:水平方向主轴(main axis)和垂直交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start 结束位置交mainend。交叉轴的开始叫做cross start 结束叫做cross end;
2.3：项目(flex item)默认延主轴排列。单个项目(flex item)所占据的主轴空间叫做main size，所占据的交叉轴空间叫做cross size
三、容器属性(6个)
3.1：flex-direction属性：(决定主轴的方向：即项目的排列方向)
语法：.box{flex-direction: row | row-reverse | column | column-reverse}
4个默认值：
row(默认)：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上端
column-reverse：主轴为垂直方向，起点在下端
3.2：flex-wrap：默认情况，项目都是排在一条线(轴线)上。而flex-wrap属性定义：如果一条线排不下，将如何换行
语法：.box{flex-wrap: nowrap | wrap wrap-reverse}
3个默认值：
nowrap(默认)：不换行
wrap：换行,第一行在上方
wrap-reverse：换行第一行在下方
3.3：flex-flow：是flex-direction和flex-wrap属性的简写形式。默认值为：row nowrap;
语法：.box{flex-flow: flex-direction | flex-wrap}
3.4：justify-content：定义项目在主轴上的对齐方式
语法：.box{justify-content: flex-start | flex-end | center | space-between | space-around}
5个默认值(假设方向自左向右 row 只跟主轴相关)：
flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐项目之间的间隔相等
space-around：每个项目两侧间隔相等。项目之间的间隔比项目与盒子边框的间隔大一倍
space-evenly：中间间隔全部相等
3.5：align-items：定义项目在交叉轴上的对齐方式(只跟交叉轴方向相关 默认自上而下)
语法：.box{align-items: flex-start | flex-end | center | baseline | strech}
5个默认值：
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
baseline：项目中第一行文字的基线对齐
strech(默认)：如果项目未设置高度或设置为auto，将沾满整个容器的高度
3.6：align-content：定义多根轴线的对齐方式，如果只有一根轴线该属性不起作用
语法：.box{align-content: flex-start | flex-end | center | space-between | space-around | stretch}
6个默认值：
flex-start：与交叉轴起点对齐
flex-end：与交叉轴终点对齐
center：与交叉轴中心点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：与交叉轴两侧的间隔相等，所以轴线之间的间隔是轴线与盒子边框间隔的两倍
stretch(默认值)：轴线沾满整个交叉轴
四、项目(flex item)属性
4.1：order：定义项目的排列顺序(数值越小越靠前[主轴开始的方向],默认为0)
语法：.item{order: number;}
4.2：flex-grow：定义项目的放大比例.默认为0.如果存在剩余空间也不放大。
语法：.item{flex-grow: number;}
4.3：flex-shrink：定义项目的缩小比例。默认值为1，如果空间不足该项目将缩小
语法：.item{flex-shrink: number;}
4.4：flex-basis:定义在分配多余空间之前，项目所占的主轴空间(main size).浏览器根据这个属性，计算主轴是否有多余的空间。默认为auto，即项目本来大小。
语法：.item{flex-basis: length(200px或者auto);}
4.5：flex：是flex-grow,flex-shrink,flex-basis简写。默认值：0 1 auto;
flex: auto;(相当于1 1 auto;)
flex: none;(相当于0 0 auto;)
4.6：align-self:定义单个项目与其他项目不一样的对齐方式。可以覆盖align-items。默认值是auto，表示继承父元素的align-items属性。如果没有父元素等同于stretch
语法：.item{align-self: auto | flex-start | flex-end | center | basline | stretch}