CSS中传统的布局方式是，基于盒子模型，依赖display属性+position属性+float属性。但对于特殊的布局非常不方便，比如，垂直居中。因此引入弹性盒子flex的布局。
一.flex布局中6个设置在容器上的属性：
1，flex-direction属性决定项目排列方向。（值：row(默认),row-reverse,column,column-reverse）
2,flex-wrap属性定义项目在一条线上排不下时该怎么换行。（值：nowrap(默认)，wrap,wrap-reverse,）
3,flex-flow是flex-direction和flex-wrap的简写方式。默认值：row wrap。
4，justify-content属性定义了项目在主轴(水平轴)上的对齐方式（值：flex-start，flex-end,center,space-between,space-around）
5,align-items属性定义了项目在交叉轴（竖直轴）上的对齐方式（值：flex-start，flex-end，center，stretch,baseline）
6,align-content属性定义了多行项目的对齐方式（值：flex-start，flex-end，center，stretch，space-between，space-around）
除了flex-flow简写属性外，有5个独立意义的属性。
二.flex布局中6个设置在项目上的属性：
1，order属性定义项目的排列顺序。数值越小，排列越靠前，默认值为0；
2，flex-grow属性定义了项目的放大比例.(默认值为0,即如果存在剩余空间，也不放大。属性为1则等分剩余空间）
3，flex-shrink属性定义了项目的缩小比例。（默认值为1，即如果空间不足，该项目将缩小。）
4，flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto。
5，flex属性是flex-grow，flex-shrink，flex-basis属性的简写，默认值：0,1，auto。
6，align-self属性规定该项目与其它项目不同的对齐方式；值：auto；flex-start;flex-end;center;baseline;stretch;
注意:1，flex布局的默认模式中因为flex-grow为1而flex-shrink为0则当项目的总宽度小于盒子宽度时，即使存在剩余空间，也不会放大；但当项目总宽度大于盒子总宽度时，项目宽度会自动缩小。
2，注意在flex-grow和flex-shrink在设置值后，项目在缩小或扩大宽度后的实际宽度是多少。
