CSS 我不明白 flex-grow 属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21492513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Do I not understand the flex-grow property?
提问by Ethan C
I'm afraid I must not understand flex-grow. If you jump to the JSFiddle below - the way I understand it, .bigshould be three times the size of the other .flex-item. As you can see, not so. Why?
恐怕我一定不了解 flex-grow。如果你跳到下面的 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>回答by Natsu
You have to specify a value for flex-basisas well (not specifying this property causes behaviour similar to using the initial value, auto).
您还必须指定一个值flex-basis（不指定此属性会导致行为类似于使用初始值auto）。
Add flex-basis: 0;to both children or just set it with the shorthand:
添加flex-basis: 0;到两个孩子或只是使用速记设置它：
.flex-item {
flex: 1; /* flex-basis is 0 if omitted */
}
.big {
flex-grow: 3;
}
回答by cimmanon
Flex-grow is commonly misunderstood in this way. Flex-grow only controls how the left over space is distributed between flex items, not how big they are in proportion to each other.
Flex-grow 通常以这种方式被误解。Flex-grow 只控制剩余空间如何在 flex 项目之间分配，而不是它们之间的比例有多大。
What you're looking for is really just this:
你要找的真的只是这个：
.flex-item {
width: 25%;
list-style-type:none;
border:1px solid black;
}
.big {
width: 75%;
}
See also
也可以看看
回答by wilcus
Authors are encouraged to control flexibility using the flex shorthand rather than with flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
鼓励作者使用 flex 速记而不是直接使用 flex-grow 来控制灵活性，因为速记会正确重置任何未指定的组件以适应常见用途。
https://drafts.csswg.org/css-flexbox/#propdef-flex-grow
https://drafts.csswg.org/css-flexbox/#propdef-flex-grow
.flex-item {
flex: 1;
}
.big {
flex: 3;
}
This is a working example
这是一个工作示例
