了解弹性增长

Question

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

提前致谢。

Answer 1

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

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

从 规格：

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

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

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

讲解 flex-grow: 0.5

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