弹性盒和多行属性

    弹性盒的属性分为两部分：
       父元素：
            1、display：flex/inline-flex;
                flex:块级弹性盒;
                inline-flex:行内块级弹性盒;
                注意:设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
                弹性盒只针对第一级子元素生效；
            2、flex-direction属性 决定主轴的方向
                row  ： 在左向右的方向（默认值）
                row-reverse ： 翻转主轴水平方向的位置： 自右向左
                column  ：  自上而下的方向 (比较常用)
                column-reverse ：翻转垂直方向的位置：自下而上的方向
            3、flex-wrap属性，定义子元素是否换行显示
                nowrap： 不换行 (默认值)
                wrap ： 换行  （常用）
                wrap-reverse：翻转wrap显示
            4、 justify-content属性 定义了项目在主轴（）上的对齐方式。
                    flex-start ：(默认值)  沿着主轴的起始点对齐的；
                    flex-end  ：沿着主轴的终点对齐的；
                    center ： 沿着主轴的居中位置对齐的；
                    space-between ：  两端对齐，中间自由分配
                    space-around ：在元素左右自动分配距离
                    space-evenly; 设置元素之间的空隙相等
            5、align-items属性定义侧轴方向是如何对齐。
                    flex-start ：沿着侧轴的起始点对齐的；
                    flex-end ： 沿着侧轴的终点对齐的；
                    center ： 沿着侧轴的中间位置对齐的；（相对比较常用）
                    baseline ：  沿着侧轴的基线对齐的
                    stretch（默认值）：拉伸至同父元素一样高；
            6、align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。align-content在侧轴上执行样式的时候，会把默认的间距给合并
                    flex-start  没有行间距   沿顶部对齐
                    flex-end  底对齐没有行间距
                    center   居中没有行间距
                    space-between  两端对齐，中间自动分配
                    space-around  自动分配距离
                    space-evenly ：设置元素之间的空隙相等
                    stretch  默认值。项目被拉伸以适应容器。  当子元素设置了高度后，在默认位置显示

        子元素：
            1、align-self属性
                    auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
                    Stretch  元素被拉伸以适应容器。
                     Center  元素位于容器的中心。
                     flex-start  元素位于容器的开头。
                      flex-end 元素位于容器的结尾。   
            2、order
                    number排序优先级，数字越大越往后排，默认为0，支持负数。
                    默认情况下：按照HTML的书写顺序进行排列的；
            3、flex-grow
                一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
                属性值：是一个数字，不用加单位
                默认值：0；   不扩展;
                属性值为1的时候就是扩展；
                   1、2、3、4、5、6......
                    flex-grow  会改变元素原有的大小；沿着主轴进行变化      
            4、flex-shrink
                一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
                flex-shrink：1；   默认值 ：  1：  收缩         0：不收缩                    
            5、flex-basis： 项目的长度
                flex-basis 的权重 大于width；
            复合式写法：flex（比较常用）
                flex-grow   flex-shrink   flex-basis
            flex：1    2     3    4..
                复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
                    
多列属性
    多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。
    1、column-count  : 分隔列数
        说明：属性规定元素应该被分隔的列数
        用于：除table外的非替换块级元素, table cells, inline-block元素
    2、column-gap   ：   设置列与列之间的间隔大小；
    3、column-rule  ：  添加列与列之间的边框
     复合属性。
        column-rule-color规定列之间规则的颜色。
        column-rule-style规定列之间规则的样式。
        column-rule-width规定列之间规则的宽度。
    4、column-fill  : 设置列与列之间的高度是否统一
        设置或检索对象所有列的高度是否统一
        auto：列高度自适应内容
        balance：所有列的高度以其中最高的一列统一  （默认值）
    5、column-span ：  跨列或者不夸列
        设置或检索对象元素是否横跨所有列。
        none：不跨列
        all：横跨所有列
    6、column-width  :   设置或检索对象每列的宽度
        说明：当column-width 和column-count  同时存在的时候；
        column-width ：最小宽度
        column-count ：最多列数
    7、复合式写法：
        columns  
            column-width  和  column-count 
            columns：200px  5;
         注：
        Internet Explorer 10 和 Opera 支持多列属性。
        Firefox 需要前缀 -moz-。
        Chrome 和 Safari 需要前缀 -webkit-。
    8、break-inside CSS 属性描述了在多列布局页面下的内容盒子如何中断,如果多列布局没有内容盒子,这个属性会被忽略。 
        auto：既不强迫也不禁止在元素内部断行并产生新列
        avoid：避免在元素内部断行并产生新列