弹性布局

基本概念：
*容器:放置弹性布局的元素的空间
*项目：弹性布局里的元素
1flex-direction 属性决定主轴的方向
row：从左端开始主轴为水平方向。
row-reverse:从右端开始主轴为水平方向.
column ：从上端开始主轴为垂直方向。
column-reverse:从下端开始主轴为垂直方向。
2flex-wrap 属性排不下换行还是不换行
nowrap:不换行空间不够会挤压每个元素都会 。
wrap：换行，从最上面开始换行。
wrap-reverse：换行，从最厦门开始换行。
3justify-content：定义主轴的对其方式
flex-start：项目位于主轴起点
Fled-end：项目位于主轴终点
center：居中显示
space-between：两边对齐各个元素间隔相等，与父元素没有间隔。
space-around：每个元素两侧间隔相等，元素之间的间隔是边框间隔个两倍
4 align-items：定义交叉轴上如何对齐
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
Center：交叉轴的中点对齐
Baseline：项目第一行基线对齐
5align-content：多根轴线对齐方式，一根不起作用
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
Center：交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线间隔平均分布
space-around:每根轴线两侧间隔相等轴线之间的间隔比边框的大一倍
Stretch：轴线沾满整个交叉轴。