flex布局（弹性布局）
开启flex后的一些效果
- 以容器为单位，开启了flex布局的容器叫flex盒子（弹性容器）
- 开启flex布局后，容器内的元素默认水平排序
- flex容器中有主轴和侧轴（默认主轴是x轴水平方向）
- 主轴方向长度默认丢失，侧轴方向长度默认为100%（建议设好宽高）
- 不会脱离文档流
- flex容器中，块、行内块、行内元素都会变成不独占一行的块元素
- 元素溢出时不换行默认压缩
设置在父容器上的属性
flex-direction：设置主轴方向
- row——默认值，行排列就是x轴方向，从左往右排列
- row-reverse——行排列就是x轴方向，从右往左排列
- columm——列排列就是y轴方向，从上往下排列
- columm-reverse——列排列就是y轴方向，从下往上排列
justify-content：设置主轴对齐方式
- flex-start——默认值，开始位置对齐
- flex-end——结束位置对齐
- center——居中对齐
- space-around——环绕对齐，空白区域在元素的左右平分，两端有间隙
- space-between——环绕对齐，空白区域在元素的左右平分，两端没有间隙
- space-evenly——环绕对齐，空白区域在元素的左右平分，两端间隙平分
设置侧轴方向对齐
- align-content：把所有行当作一个整体对齐
- align-items：把每行当作一个整体对齐
- 他的值与设置主轴方向的值同理
flex-wrap：设置换行
- nowrap——默认值，不换行，溢出时挤压
- wrap——换行，父元素有确定高度，默认在父元素空区域居中换行，没有空区域时则直接在下面换行
- wrap-reverse——往上方换行
flex-flow：可同时设置主轴方向的值，和是否换行，使用空格隔开
设置在子容器上的属性
- flex：0-1 设置元素对空白区域的占比，所有子元素都设置1时平分空白区域
- align-self：单独设置元素侧轴方向的对齐法式
- flex-grow：默认值为0，设置元素的扩张比，计算方法：原来的宽度+（空白区域的宽度/份数）x所占份数
- order：设置元素的排列顺序，默认值都为0，默认标签书写顺序排列，值设置的越大排的就越后
flex布局的缺点
占网速
不兼容ie9以下的浏览器（啊ie他就是歌姬吧）
flex容器中子元素设置float，clear（浮动和清除浮动）无效
