该
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 > <div >LOREN IPSUM LOREN IPSUM</div> <div >LOREN IPSUMLOREN IPSUMLOREN IPSUM</div> <div > LOREN IPSUMLOREN IPSUM</div></div>注意：事实的真相是，因为div＃1和＃2具有相同的flex-grow
因子，而div＃3的因子为0，所以该值无关紧要。您可以使用任何数字替换0.5。只要两个div中的相同，这些项目的计算结果就将变为225px，因为比例是相同的。
