我不理解flex-grow属性吗？

Question

我恐怕不能理解弹性增长.如果你跳到下面的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>

Answer 1

您还必须指定一个值flex-basis(不指定此属性会导致类似于使用初始值auto的行为).

添加flex-basis: 0;到两个孩子或只是用速记设置:

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

http://codepen.io/anon/pen/JEcBa

Answer 2

灵活增长通常以这种方式被误解.Flex-grow仅控制左侧空间在弹性项之间的分布方式,而不是它们彼此成比例的大小.

您正在寻找的是这样的:

.flex-item {
  width: 25%;
  list-style-type:none;
  border:1px solid black;
}
.big {
  width: 75%;
}

也可以看看

• Flex-grow不能按预期工作(flex项目没有我期望的宽度)
• 在什么情况下,flex-shrink适用于flex元素,它是如何工作的？

Answer 3

鼓励作者使用 flex 速记而不是直接使用 flex-grow 来控制灵活性，因为速记会正确重置任何未指定的组件以适应常见用途。

https://drafts.c​​sswg.org/css-flexbox/#propdef-flex-grow

.flex-item {
   flex: 1;
}
.big {
   flex: 3;
}

这是一个工作示例

http://codepen.io/anon/pen/VjZYPV