该flex-grow属性旨在在弹性项目之间分配容器中的自由空间。
它 不适 用于直接或精确调整弹性项目的大小。
从 规格：
flex-grow …确定当分配正的自由空间时，flex项目相对于flex容器中其余flex项目将增长多少。
因此，flex-grow不会强迫物品包装。这是您的示例flex-grow:1000：demo
要定义一个柔性的项目使用的长度width，height或flex-basis。
申请时flex:0.5，您使用的是flexshorthand属性，它是这样说的：
该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，因为比例是相同的。
602392714
清零编程群