在父元素上的元素

display: flex;

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

flex-direction: ; 设置方向

        flex-direction: row; 行排列，X轴，默认值，从左到右排列
        flex-direction: row-reverse;  从右到左排列
        flex-direction: column;  列排列，Y轴，从上到下

justify-content: ; 设置对齐方式

        justify-content: center;  居中
        justify-content: flex-start;  默认值开始位置
        justify-content: flex-end;  结束位置
        justify-content: space-around;  环绕对齐，空白区域在元素左右平均分布，两端也有间隙
        justify-content: space-between;  环绕对齐，空白区域在元素左右平均分布，两端没有间隙
        justify-content: space-evenly;  间隙平分

flex-wrap: ; 设置换行

        flex-wrap: nowrap;  默认值，不换行，溢出挤压
        flex-wrap: wrap;  换行，当父元素有明确高度是，默认下父元素空区域居中换行
        flex-wrap: wrap-reverse;  往反方向换行
        

flex-flow: ; 主轴方向，是否换行

align-items: ; 设置侧轴方向排列方式，把每行当做一个整体对齐

align-content: ; 设置侧轴方向排列方式，值同justify-content: ;把所有行当做一个整体对齐

设置在子元素的属性

        flex: 0-1;  设置元素对于空白区域的占比，所有都设置同等flex时平分

        align-self: ;  单独设置元素侧轴方向的对齐方式

        flex-grow: ;  默认是0，设置元素的扩张比，计算方式：原宽度+（空白区域/分数）X所占分

        flex-shrink: ;  设置的缩小比，默认是1,0时表示不缩小

        order: ;  设置元素排列顺序，默认标签书写排序排列，值越大排越后

flex布局的缺点：

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