了解 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 。

提前致谢。

Answer 1

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

它不适用于直接或精确调整柔性物品的尺寸。

从规格 ：

flex-grow ...确定当分配正空闲空间时，flex项目相对于flex容器中其余flex项目的增长量。

因此， flex-grow不会强制项目包装。 以下是flex-grow: 1000示例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，则这将在可用空间中留下150px（ 演示 ）。

如果每个项目都有flex-grow: 1 ，则每个项目将消耗额外空间的50px，每个项目将计算width: 200px （ 演示 ）。

但是在你的代码中，有两个项目有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，因为比例将是相同的。

更多信息：

• flex-grow不按预期调整flex项目的大小
• 如何让flexbox在计算中包含填充？
• flex-basis和width之间有什么区别？

Answer 2

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

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

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

现在，每个 div 元素都设置为 flex = 0.3，所以每个元素都会增长 35/3 =~ 11.66vw