弹性布局可以理解为将盒子分为若干块，通过css对弹性布局的几个属性的控制，将盒中盒移动到合适位置。这是七娃对弹性布局flex的初步认知！

flex的属性：flex-direction、flex-wrap、justify-content、align-items、align-content。

使用方法：父级盒子 

display:flex;

1.flex-direction，盒子内元素排列与方向 

flex-direction:row; /*水平方向 从左向右排列*/
flex-direction:row-reverse;/*水平方向从右向左排列*/
flex-direction:column;/*垂直方向从上到下排列*/

2.flex-wrap，盒子内元素换行 

flex-wrap: nowrap; /*(默认)不换行，自动等比伸缩*/
flex-wrap: wrap; /*换行，一个元素一行*/

3.justify-content， 水平方向的对齐方式 

justify-content : center;/*水平居中排列*/
justify-content : flex-start;/*偏头对齐：由左到右、上到下*/
justify-content : flex-end;/*偏尾对齐：由右到左、下到上*/
justify-content : space-between;/*平均分布*/
justify-content : space-around;/*等间距平均分布*/

4.align-items ，垂直方向的对齐方式 

align-items : flex-start;/*顶部对齐*/
align-items : flex-end; /*底部对齐*/
align-items : center;/*垂直方向居中对齐*/

5.align-content，会设置自由盒内部各个项目在垂直方向排列方式

align-content:strecth;/*默认，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。默认从顶部开始排列。*/
align-content:flex-start;/*顺序堆叠*/
align-content: flex-end; /*倒序堆叠*/
align-content: center; /*中心堆叠*/
align-content: space-between;/*从头尾开始平均分布*/
align-content: space-around;/*平均分布，距离头尾有间距*/

缺点：使用弹性布局之后，子元素的float、clear和vertical-align属性将失效，浮动将不再生效了！

实例教程：盒中盒实现水平垂直居中，将以下css写入父级css即可！； 

display: flex;/*开启弹性布局*/
justify-content: center;/*横轴居中*/
align-items: center;/*垂直居中*/