了解弹性增长

  • Z时代
  • 2024-01-10
  • 分类：问答

我有3个div，如果我给出flex: 0.5前两个div，则如果给出了，最后一个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>

提前致谢。

回答：

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

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

从 规格：

flex-grow …确定当分配正的自由空间时，flex项目相对于flex容器中其余flex项目将增长多少。

因此，flex-grow不会强迫物品包装。这是您的示例flex-grow:1000：demo

要定义一个柔性的项目使用的长度width，height或flex-basis。

回答：

申请时flex:0.5，您使用的是flexshorthand属性，它是这样说的：

  • flex-grow: 0.5

  • flex-shrink: 1

  • flex-basis: 0

该flex-grow成分代表比例。在这种情况下，它告诉弹性项目占用 容器中相对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

.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，因为比例是相同的。

以上是 了解弹性增长 的全部内容， 来源链接： utcz.com/qa/424421.html

回到顶部