flex布局（弹性布局）：

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

设在父容器里的属性:

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

设置在子容器的属性：

        flex:0-1.设置元素对于空吧区域的占比，所有子元素都设flex时，平分
        align-self：单独设置，元素侧轴方向的对齐方式
        flex-grow：默认0，设置元素的扩张比，计算：原宽度+（空白区宽度/份数）
        flex-shrink：设元素缩小比，默认
        order：设元素排列，值越大越后

缺点：

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