flex布局（弹性布局）：

1、以容器为单位，开启了flex布局的容器叫弹性盒子（flex容器）
2、开启flex以后，容器内容器默认水平排列
3、flex容器中有：主轴（默认是x轴）和侧轴（y轴）
4、主轴方向长度默认丢失，侧轴方向长度默认为100%
5、不脱离文档流
6、flex容器中：块、行内块、行内元素都会变为不独占一行的块元素
7、元素溢出默认压缩，不会换行

设置在父容器的属性：

flex-direction: 设置主轴方向
    row 行排列，x轴 默认值，从左到右排列
    row-reverse 从右到左排列
    colum 列排列，y轴，从上到下排列
    colum 从下到上排列
    
justify-content: 设置对齐方式
    flex-start 默认值，开始位置
    flex-end 结束位置
    center 居中
    space-around 环绕对齐，空白区域在元素左右平均分布，两端也有间隙
    space-between 环绕对齐，空白区域在元素左右平均分布，两端没有间隙
    space-evenly 空白区域在元素间隙平分，包括左右两端
    
flex-wrap: 设置换行
    nowrap 默认值，不换行，溢出挤压
    wrap 换行，当父元素有确定高度时，默认在父元素空白区域居中换行，没有高度时则直接换行
    wrap-reverse 往反方向换行
    
align=content: 设置侧轴方向排列方式，值同justify-content
    把所有行当作一个整体对齐
    
align-items: 设置侧轴方向排列方式
    把每一行当作一个整体
    
flex-flow: 主轴方向，是否换行

设置在子容器的属性：

flex:0-1 设置元素对于空白区域的占比，所有子元素都设置flex时，平分
align-self 单独设置元素侧轴方向的对齐方式
flex-grow 默认是0，设置元素的扩张比，计算方式：原宽度+(空白区域宽度/份数)*所占份数
flex-shrink 设置元素的缩小比，默认是1，设置为0时不缩小
order 设置元素排列顺序，默认标签书写顺序排列，值越大越往后

缺点：

1、占带宽
2、不兼容IE9以下（一般不考虑）
3、flex容器中的子元素设置float、clear无效