Question

我有3个div，如果我将flex: 0.5提供给前两个div，如果我已经给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。

提前致谢。

Answer 1

flex-grow属性旨在在弹性项目中分配容器中的可用空间。

不旨在直接或精确调整弹性项目的大小。

来自spec：

flex-grow ...确定弹性项目相对增长的程度当正向自由时，弹性容器中的其余弹性项目空间分布。

因此，flex-grow不会强制项目换行。以flex-grow: 1000：demo

为例

要定义弹性项目的长度，请使用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因子。

因此，例如，如果容器为width: 600px并且三个div的总宽度为450px，则会在可用空间（demo）中留下150px。

如果每个项目都有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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

注意：问题的真相是，因为div＃1和＃2具有相同的flex-grow因子，而div＃3的因子为0，所以该值无关紧要。你可以使用任何数字来代替0.5。只要它在两个div中都相同，项目将计算为225px，因为比例将相同。

更多信息：

了解flex-grow

1 个答案:

解释`flex-grow: 0.5`

了解flex-grow

1 个答案:

解释flex-grow: 0.5

解释`flex-grow: 0.5`