弹性布局理解

使用方法：父级

display:flex;

盒子内元素排列与方向

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

flex-wrap,盒子内元素换行

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

justity-content,水平方向对齐方式

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

align-items,垂直方向的对齐方式

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

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写入父级即可！

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