我不了解flex-grow属性吗？

Question

恐怕我一定不明白弹性增长。如果您跳到下面的JSFiddle（据我所知），它.big的大小应该是另一个的三倍.flex- item。如您所见，事实并非如此。为什么？

.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>

Answer 1

您还必须指定一个值flex- basis（不指定此属性会导致行为类似于使用初始值auto
将其添加flex-basis: 0;到两个孩子中，或仅使用速记进行设置：

.flex-item {
    flex: 1; /* flex-basis is 0 if omitted */
}
.big {
    flex-grow: 3;
}