【面試題flex】關於彈性盒子中 flex: 0 1 auto 的一系列問題

一 彈性盒子中 flex: 0 1 auto 表示什么意思

三個參數分別對應的是 flex-grow, flex-shrink 和 flex-basis，默認值為 0 1 auto。

1.flex-grow 屬性定義項目的放大比例，默認為 0，即如果存在剩余空間，也不放大。

2.flex-shrink 屬性定義了項目的縮小比例，默認為 1，即如果空間不足，該項目將縮小。

3.flex-basis 屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。

二 計算出下列盒子各站多少寬度？

#box {display:flex;width:400px;height:100px;}
#box li:nth-child(1){-webkit-flex:1 1 400px;flex:1 1 400px;}
#box li:nth-child(2){-webkit-flex:1 2 400px;flex:1 2 400px;}
#box li:nth-child(3){-webkit-flex:1 2 400px;flex:1 2 400px;}

<ul id="box" class="box">
    <li>flex:1 1 400px;</li>
    <li>flex:1 2 400px;</li>
    <li>flex:1 2 400px;</li>
</ul>

一看過去懵了，這個是怎么計算的，以前沒遇到過，涼了涼了...

下面我就來看一下這個題目，及詳細解釋：

上面定義了父容器（即主軸寬為400），由於子元素設置了flex,
即 400+400+400=1200px, 那么子元素將會溢出1200-400=800px;
由於同時設置了收縮因子，所以加權綜合可以得出：400*1+400*2+400*2=2000px;
於是可以得出三個li標簽被溢出量是多少：
第一個li：（400*1/2000）*800 = 160px;
第二個li: （400*2/2000）*800 = 320px;
第三個li: （400*2/2000）*800 = 320px;
所以可以三個li標簽實際寬度為：400-160=240px; 400-320=80px; 400-320px=80px;

經過上面詳細的解釋，想必各位都清楚了如何計算flex中子元素的寬度，下面來看下一題，順便練練手！

#box {display:flex;width:400px;height:100px;}
#box li:nth-child(1){-webkit-flex:1 1 400px;flex:1 0 100px;}
#box li:nth-child(2){-webkit-flex:1 2 400px;flex:2 0 100px;}
#box li:nth-child(3){-webkit-flex:1 2 400px;flex:3 0 100px;}

<ul id="box" class="box">
    <li>flex:1 0 100px;</li>
    <li>flex:2 0 100px;</li>
    <li>flex:3 0 100px;</li>
</ul>

你能算出它們實際占多少寬度嘛！

解釋：

上面定義了父容器（即主軸寬為400），由於子元素設置了flex,
即 100+100+100=300px, 那么超出情況則400-300=100px;因為設置了flex-grow,則：
100/（1+2+3）=16.67；
於是可以得出三個li標簽最后的寬度為：
第一個li： 100+1*16.67=116.67px;
第二個li:  100+2*16.67=133.34px;
第三個li:  100+3*16367=150px;

小伙伴你算出來了嘛？