了解弹性增长

Question

我有 3 个 divs，如果我给前两个 divs flex: 0.5，如果我给了，最后一个 div 应该移到下一行flex-wrap: wrap。如有错误请指正

以下是我的 html / css:

.parent {
  display: flex;
  height: 100px;
  background-color: red;
  flex-wrap: wrap;
}
.child-1 {
  background-color: green;
  flex: 0.5;
}
.child-2 {
  background-color: yellow;
  flex: 0.5;
}
.child-3 {
  background-color: pink;
}

<div class="parent">
  <div class="child-1">LOREN IPSUM LOREN IPSUM</div>
  <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
  <div class="child-3">LOREN IPSUMLOREN IPSUM</div>
</div>

请检查 JSFiddle。

提前致谢。

Answer 1

flex-grow 属性 旨在将容器中的免费 space 分配给 flex 项目。

它不是用于直接或精确调整弹性项目的大小。

来自spec:

flex-grow ... determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

因此，flex-grow 不会强制项目换行。这是 flex-grow: 1000 的示例：demo

要定义弹性项目的长度，请使用 width、height 或 flex-basis。

---

解释中flex-grow: 0.5

当您应用 flex:0.5 时，您正在使用 flex shorthand 属性 表示：

• flex-grow: 0.5
• flex-shrink: 1
• flex-basis: 0

flex-grow分量表示一个比例。在这种情况下，它告诉 flex 项目消耗容器中可用 space 的 一半，相对于其兄弟 .

的 flex-grow 因素

因此，例如，如果容器是 width: 600px 并且三个 div 的总宽度是 450px，这将在空闲 space 中留下 150px（demo).

如果每个项目有 flex-grow: 1，那么每个项目将消耗额外 space 的 50px，并且每个项目将计算为 width: 200px（demo）。

但是在您的代码中，两项有 flex-grow: 0.5，最后一项有 flex-grow: 0，所以它是这样分解的：

• div#1 will get 75px (half of the available space)
• div#2 will get 75px (half of the available space)
• div#3 will get 0 (because its flex-grow is 0)

这些是现在的计算值：

• div#1 = width: 225px
• div#2 = width: 225px
• div#3 = width: 150px

demo

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  background-color: red;
  width: 600px;
}

.parent > div {
  flex-basis: 150px;
}

.child-1 {
  flex: 0.5;
  background-color: green;
}

.child-2 {
  flex: 0.5;
  background-color: yellow;
}

.child-3 {
  background-color: pink;
}

<div class="parent">
  <div class="child-1">LOREN IPSUM LOREN IPSUM</div>
  <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
  <div class="child-3"> LOREN IPSUMLOREN IPSUM</div>
</div>

注意：事情的真相是，因为divs#1和#2有相同的flex-grow因子，而div#3有系数为 0，则该值无关紧要。您可以使用任何数字来代替 0.5。只要在两个 div 中相同，项目将计算为 225px，因为比例相同。

更多信息：