5 伸缩项目伸缩

flex-grow：

flex-grow 属性定义伸缩项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* 默认值 0 */
}

如果所有伸缩项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个伸缩项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink：

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* 默认值 1 */
}

如果所有伸缩项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个伸缩项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis：

flex-basis 属性定义了在分配多余空间之前，伸缩项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即伸缩项目的本来大小。

.item {
  flex-basis: <length> | auto; /* 默认值 auto */
}

flex：

flex 是复合属性，是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

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

案例分析：

<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；
由于同时设置了收缩因子，所以加权综合可得300*1+200*2+400*3=1900px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(300*1/1900)*100，即约等于16px
b被移除溢出量：(200*2/1900)*100，即约等于21px
c被移除溢出量：(400*3/1900)*100，即约等于63px
最后a,b,c的实际宽度分别为：300-16=284px, 200-21=179px, 400-63=337px

仍然是上面这个例子，不过将容器的宽度改成了1500px

<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/(1+2+3))*600，即约等于100px
b的扩展量：(2/(1+2+3))*600，即约等于200px
c的扩展量：(3/(1+2+3))*600，即约等于300px
最后a,b,c的实际宽度分别为：300+100=400px, 200+200=400px, 400+300=700px
从本例能看出：
当「flex-basis」在「flex」属性中不为0时（包括值为auto，此时伸缩基准值等于自身内容宽度），「flex子项」将分配容器的剩余空间（剩余空间即等于容器宽度减去各项的伸缩基准值）

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