flex-grow如何与flexbox一起工作？ [英] How exactly does flex-grow work with flexbox?
问题描述
我有3个div，如果我给前两个div给 flex：0.5 ，最后一个div应该移动到下一行，如果我给了 flex-wrap：wrap 。
以下是我的html / css：
.parent {display：flex; height：100px;背景颜色：红色; 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 。
提前感谢。
flex-grow 属性旨在在Flex项目之间分配容器中的可用空间。
$ b //www.w3.org/TR/css-flexbox-1/#propdef-flex-growrel =nofollow> spec ：
flex-grow...确定flex项目将增长多少相对
到其余的flex项目
因此， flex-grow 不会强制项目换行。以下是您的示例： flex-grow：1000 ： demo < a>
要定义弹性项的长度，请使用 width ， code>或 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，这会在可用空间中留下150像素（演示）。
如果每个项目都有 flex-grow：1 ，那么每个项目将消耗50px的额外空间，每个项目将计算为 width：200px （演示）。
但是在你的代码中，两个项有 flex-grow：0.5 ，最后一个项具有 flex-grow：0 ，所以这里如何分解：
- div＃1将获得75px （可用空间的一半）
- div＃2将获得75像素（可用空间的一半）
- div＃3将获得0
flex-growis 0）
现在是这些计算值：
- div＃1 =
width：225px
- div＃2 =
width：225px
- div ＃3 =
width：150px
真相问题是，因为div＃1和＃2具有相同的 flex-grow 因子，div＃3的因子为0，所以该值是不相关的。您可以使用任何数字替换0.5。
更多信息：
I have 3 divs and if I give flex: 0.5 to first two divs, the last div should move to the next line if I have given flex-wrap: wrap. Please correct if I am wrong.
Following is my 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>
Please check JSFiddle for this.
Thanks in advance.
The flex-grow property is designed to distribute free space in the container among flex items.
It is not intended for setting the size of flex items.
From the spec:
flex-grow... determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.
Hence, flex-grow will not force items to wrap. Here's your example with flex-grow: 1000: demo
To define a length of a flex item use width, height or flex-basis.
Explaining flex-grow: 0.5
When you apply flex:0.5, you're using the flex shorthand property to say this:
flex-grow: 0.5flex-shrink: 1flex-basis: 0
The flex-grow component represents a proportion. In this case, it's telling flex items to consume half of the available space in the container relative to the flex-grow factor of its siblings.
So, for instance, if the container were width: 600px and the total width of the three divs was 450px, this would leave 150px in free space (demo).
If each item had flex-grow: 1, then each item would consume 50px of the extra space, and each item would compute to width: 200px (demo).
But in your code, two items have flex-grow: 0.5, and the last item has flex-grow: 0, so here's how it breaks down:
- div#1 will get 75px (half of the available space)
- div#2 will get 75px (half of the available space)
- div#3 will get 0 (because its
flex-growis 0)
These are the computed values now:
- div#1 =
width: 225px- div#2 =
width: 225px- div#3 =
width: 150px
The truth of the matter is, because divs #1 and #2 have the same flex-grow factor, and div #3 has a factor of 0, the value is irrelevant. You could use any number to replace 0.5. As long as it's the same in both divs, the items will compute to 225px, because the proportions will be the same.
More information:
这篇关于flex-grow如何与flexbox一起工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
