flex弹性布局

flex布局（又称弹性布局）不会脱离标准流，同时弹性盒子的总宽度大于父元素的 宽度时子元素的宽度会失效并将父元素的宽度平均分给子元素，想要使用弹性盒子需要先给父元素设置一个display：flex属性然后按照不同的轴排列方式分为一下两种
（1）沿主轴进行排列
justify-content：fiex-start / flex-end / center / space-between / space-around / space-evenly
flex-stare：该效果为默认效果，弹性盒子从起点开始依次排列
flex-end：弹性盒子从终点开始依次排列
center：弹性盒子沿主轴居中排列
space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
（2）沿侧轴排列 控制所有的弹性盒子使用align-item：stretch / center / flex-start / flex-end
stretch：弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center：弹性盒子沿着侧轴居中排列
flex-start：弹性盒子从起点位置开始依次排列
flex-end：弹性盒子从终点开始依次排列

(3)改变主轴方向：flex-direction：row / column /  row-reverse / column-reverse
row：水平放行，从左到右（默认）
column：垂直方向，从上到下
row-reverse：水平方向，从右至左 
column-reverse：垂直方向，从右至左

(4)弹性盒子伸缩比给盒子设置：flex：num

num为具体的数字代表该盒子占剩余部分的num分

(5)当父级宽度不够时弹性盒子自动换行给父级设置：flex-wrap：wrap

(6)对多行弹性盒子设置行对齐，给父级设置：align-content：属性值

属性值与justify-content的属性值相同