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;添加到这两个孩子，或者只使用shorthand

进行设置

.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-grow仅控制左侧空间在弹性项目之间的分布方式，而不是它们彼此成比例的大小。

你正在寻找的只是这个：

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

另见

Flex-grow not working as expected (flex items don't have the widths I expect)
In what circumstances is flex-shrink applied to flex elements and how does it work?

Answer 3

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

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

UserService.validateLoginCredentials()

这是一个有效的例子

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

我不理解flex-grow属性吗？

3 个答案: