我不了解 flex-grow 属性吗？答案

【问题标题】：Do I not understand the flex-grow property?我不了解 flex-grow 属性吗？
【发布时间】：2014-02-24 21:10:24
【问题描述】：

恐怕我一定不懂 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>

【问题讨论】：

相关：flex-grow not sizing flex items as expected

标签： css flexbox flex-grow

【解决方案1】：

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

将flex-basis: 0; 添加到两个孩子或仅使用shorthand 进行设置：

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

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

【讨论】：

我知道这个答案是旧的，但它有助于提供一个简短的描述，说明为什么 flex-grow 需要与 flex-basis 建立关系。

【解决方案2】：

Flex-grow 通常以这种方式被误解。 Flex-grow 只控制剩余空间在弹性项目之间的分配方式，而不是它们之间的比例。

您正在寻找的只是这个：

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

另见

【讨论】：

这与比例设置为 1:3 的最佳答案相矛盾，不是吗？

【解决方案3】：

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

https://drafts.csswg.org/css-flexbox/#propdef-flex-grow

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

这是一个工作示例

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

【讨论】：

这里对实际设置的内容进行一些解释会有所帮助。