理解flex-grow

Question

我有3个div，如果我给前两个div flex: 0.5，那么如果我已经给了flex-wrap: wrap，最后一个div应该移到下一行。如果我错了，请纠正我。

以下是我的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以获取相关内容。

提前致谢。

- Harkirat Saluja

---

看起来你想要 flex: 50%，这与 flex: 0.5 不同。 - Oriol

Answer 1

flex-grow属性旨在在容器中的伸缩项之间分配自由空间。

它不用于直接或精确地调整伸缩项的大小。

来自规范:

flex-grow ... 确定当分配正空闲空间时，伸缩项相对于伸缩容器中其余伸缩项将增长多少。

因此，flex-grow不会强制项目换行。以下是使用flex-grow: 1000的示例：演示

要定义伸缩项的长度，请使用width、height或flex-basis。

---

解释flex-grow: 0.5

当你应用flex:0.5时，你使用了flex简写属性来表达以下内容：

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

flex-grow组件代表比例。在这种情况下，它告诉 flex 项目相对于其兄弟姐妹的flex-grow因子消耗容器中可用空间的一半。

因此，例如，如果容器的宽度为600px，三个 div 的总宽度为450px，那么这将留下150px的自由空间（demo）。

如果每个项目都有flex-grow: 1，那么每个项目将占用50px的额外空间，并且每个项目将计算为width: 200px (demo)。

但是在您的代码中，两个项目具有flex-grow: 0.5，而最后一个项目具有flex-grow: 0，因此它的分配如下：

- div#1将获得75px（可用空间的一半） - div#2将获得75px（可用空间的一半） - div#3将获得0（因为其flex-grow为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>

注意：事实上，因为div #1和#2具有相同的flex-grow因子，而div #3的因子为0，所以值是无关紧要的。您可以使用任何数字替换0.5。只要在两个div中相同，项目将计算为225px，因为比例将保持不变。

更多信息：

- flex-grow not sizing flex items as expected - 如何使flexbox包含填充计算？ - flex-basis和宽度之间有什么区别？

- Michael Benjamin

Answer 2

Flex = 0.5 意味着，您具有 flex-grow = 0.5、flex-shrink = 1 和 flex-basis = 0，您正在将可用空间分配给 flex 项目。

假设您有一个宽度为 100vw 的容器（假设 div 元素），其中包含两个每个 40vw 的灵活项（div 元素）。因此，您的两个 div 元素消耗的总宽度将等于 80vw，剩余的可用空间将为 20vw。现在，您已经为两个 div 元素设置了 flex = 0.5。因此，每个 div 元素将增长 20vw/2 = 10vw，以完全占用容器的自由空间。

再考虑一个具有 3 个 div 元素的场景，div1 的宽度为 30vw，div2 的宽度为 10vw，div3 的宽度为 25vw。3 个 div 元素消耗的总宽度= 30 + 10 + 25 = 65vw。总可用空间= 100-65 = 35vw。

现在，每个 div 元素都设置为 flex = 0.3，因此每个元素将增长约 35/3 =~ 11.66vw。

- Syed Hussaini