该flex-grow
属性旨在在弹性项目之间分配容器中的自由空间。
它 不适 用于直接或精确调整弹性项目的大小。
从 规格:
flex-grow
…确定当分配正的自由空间时,flex项目相对于flex容器中其余flex项目将增长多少。
因此,flex-grow
不会强迫物品包装。这是您的示例flex-grow:1000
:demo
要定义一个柔性的项目使用的长度width
,height
或flex-basis
。
申请时flex:0.5
,您使用的是flex
shorthand属性,它是这样说的:
该flex-grow
成分代表比例。在这种情况下,它告诉弹性项目占用 容器中相对flex-grow
于其同级因素的一半可用空间。
因此,例如,如果容器为width: 600px
且三个div的总宽度为450px,则将在可用空间(demo)中留下150px 。
如果每个项目都有flex-grow: 1
,则每个项目将占用50px的额外空间,并且每个项目将计算为width: 200px
(demo)。
但是在您的代码中,有两个项目具有flex-grow: 0.5
,而最后一个项目具有flex-grow: 0
,因此这是分解的方式:
现在是这些计算值:
.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,因为比例是相同的。