【面试题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;

小伙伴你算出来了嘛？