一、弹性盒布局
简易来讲就是可以伸缩的盒子
优势：写起来比较简单
使用灵活且代码简洁
缺点：不兼容IE和安卓低级版本
二、使用
容器 （父元素）
display:flex------让容器成员是弹性的项目
flex-direction------决定主轴是什么方向（项目排序方向）
1、row 横向排列
2、column 纵向排列
3、row-reverse 横向翻转
4、column-reverse 纵向翻转
flex-wrap------让项目是否换行
1、nowrap 不换行
2、wrap 换行
3、wrap-reverse 换行翻转
justify-content------横向盒子摆放
1、flex-start 靠左
2、flex-end 靠右
3、center 水平居中
4、space-between 两端对齐，项目之间的距离都相等
5、space-around 两端对齐，最两边的距离是项目间距离的一半
align-items------纵向盒子摆放
1、flex-start 靠上
2、flex-end 靠下
3、center 垂直居中
4、baseline 项目的第一行文字为基线
5、stretch 如果容器没有设置高度或者auto则占满整个高度
容器成员|项目 （子元素）
（许多元素，要分清楚是给父元素加还是给子元素加）
order------排序方式，数值越小，排序位置越靠前
flex-grow------默认值0，比例放大
flex-shrink------默认值1，比例缩小
flex-basis------相当于width
flex------复合（grow + shrink +basis）
默认值 0 1 auto
后两个值是可选择