相关疑难解决方法(0)

我恐怕不能理解弹性增长.如果你跳到下面的JSFiddle - 我理解它的方式,.big应该是另一个的三倍.flex-item.如你所见,不是这样.为什么？

http://jsfiddle.net/nrur6mmo/

.flex-container {
    display:flex;
    padding:0 20%;
}
.flex-item {
    flex-grow:1;
    list-style-type:none;
    border:1px solid black;
}
.big {
    flex-grow:3;
}

<ul class="flex-container">
    <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li>
    <li class="flex-item">Not really working like expected I don't think...</li>
</ul>

假设我们有一个宽度为400px的弹性容器.

在这个容器里面有三个flex项:

:nth-child(1) { flex: 0 2 300px; }   /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) { flex: 0 1 200px; }
:nth-child(3) { flex: 0 2 100px; }

因此,flex项的总宽度为600px,容器中的可用空间为-200px.

在这个问题,本文和flexbox规范的帮助下,我学会了在flex项目中分配负空闲空间的基本公式:

步骤1

将每个收缩值乘以其基础并将它们全部加在一起:

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

总计= 1000

第2步

将上面的每个项目除以总数来确定收缩因子:

:nth-child(1)  600 / 1000 = .6
:nth-child(2)  200 / 1000 = .2
:nth-child(3)  200 / 1000 = .2 …