关于弹性布局flex属性详解

flex 复合属性,设置或检索弹性盒模型对象的子元素如何分配空间。

由以下三个属性组成：
<’ flex-grow ‘>：
用来指定扩展比例，即剩余空间是正值时此flex子项相对于flex容器里其他flex子项能分配到空间比例，在flex属性中该值如果被省略则默认为1

<’ flex-shrink ‘>：
用来指定收缩比例，即剩余空间是负值时此flex子项相对于flex容器里其他flex子项能收缩的空间比例。在flex属性中该值如果被省略则默认为1
在收缩的时候收缩比例会以伸缩基准值加权(希望大家深入理解这句话)

<’ flex-basis ‘>：
用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，flex子项宽度的起始数值， 在「flex」属性中该值如果被省略则默认为0
在flex属性中该值如果被指定为auto，则伸缩基准值的计算值是自身的 width 值，如果自身的宽度没有定义，则宽度取决于内容

快捷属性值：
auto 1 1 auto 会根据主轴自动伸缩以占用所有剩余空间
none 0 0 auto 在任何情况都不会发生伸缩
initial 0 1 auto 在有剩余空间的时候也不会扩展，但在空间不足时会进行收缩（initial 设置该属性的属性值为初始值）

如果缩写「flex: 1」, 则其计算值为「1 1 0」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

示例：如下情况每个元素的计算宽是多少

Code：
    <ul class="flex">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    .flex{display:flex;width:800px;margin:0;padding:0;list-style:none;}
    .flex :nth-child(1){flex:1 1 300px;}
    .flex :nth-child(2){flex:2 2 200px;}
    .flex :nth-child(3){flex:3 3 400px;}

本例定义了父容器宽（即主轴宽）为800px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么子元素将会溢出900-800=100px；
收缩因子 1 : 2 : 3
伸缩基准 300 : 200 : 400=3 : 2 : 4
收缩比例会以伸缩基准值加权
1*3 : 2*2: 3*4=3 : 4：12
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(1/19)*100，即约等于16px
b被移除溢出量：(4/19)*100，即约等于21px
c被移除溢出量：(12/19)*100，即约等于63px
最后a,b,c的实际宽度分别为：300-16=284px, 200-21=179px, 400-63=337px

Code：
    <ul class="flex">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

   .flex{display:flex;width:1500px;margin:0;padding:0;list-style:none;}
    .flex :nth-child(1){flex:1 1 300px;}
    .flex :nth-child(2){flex:2 2 200px;}
    .flex :nth-child(3){flex:3 3 400px;}

本例定义了父容器宽（即主轴宽）为1500px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么容器将有1500-900=600px的剩余宽度；
于是我们可以计算a,b,c将被扩展量是多少：
a的扩展量：1/6*600，即约等于100px
b的扩展量：2/6*600，即约等于200px
c的扩展量：3/6*600，即约等于300px
最后a,b,c的实际宽度分别为：300+100=400px, 200+200=400px, 400+300=700px

从本例能看出：
当「flex-basis」在「flex」属性中不为0时，「flex子项」将分配容器的剩余空间（剩余空间即等于容器宽度减去各项的伸缩基准值）

当「flex-basis」在「flex」属性中等于0时，「flex子项」将分配容器的所有空间（因为各项的伸缩基准值相加等于0，剩余空间等于容器宽度减去各项的伸缩基准值，即减0，最后剩余空间值等于容器宽度），所以可以借助此特性，给各子项定义「flex: n」来进行按比例均分容器总宽度