伸缩布局
父元素属性：
display:
flex;将盒子转化为flex弹性布局盒子
flex-direction：调整主轴方向（默认水平方向 ）可以互换主侧轴：
row：默认水平方向
column：竖直方向
row-reverse：水平反方向
column-reverse：竖直反方向
justify-content：调整主轴方向对齐方式
flex-start：从开始位置对齐，因为有主轴方向随意不能说向左对齐
flex-end：从结束位置对齐
center：居中
space-around：均匀分布
space-between：两端对齐
align-items：调整侧轴方向对齐方式
flex-start：
flex-end：
center：
beseline：以元素的基线作为对齐的标准
stretch：伸缩，当不指定高的时候，高自动伸长
flex-warp：控制是否换行
wrap：换行
nowrap：不换行
align-content：堆栈排列，对flex-wrap后的换行进行控制
flex-start：
flex-end：
center：
space-around：均匀分布
space-between：两端对齐
stretch：
flex-flow：是flex-direction和flex-warp的简写
column wrap
column nowrap
......
子元素的属性
flex：将父盒子剩余的空间进行分配，除去width的部分
1 2 3 ......
align-self：可以覆盖父元素设置的align-items
flex-start
flex-end
center
baseline
stretch
order：
数字大小代表显示的前后顺序
1 2 3
