flex-grow是否受flex-basis影响？为何flex-grow:10未达预期尺寸

嘿，我来帮你拆解这个Flexbox的问题～

核心原因是你误解了flex-grow的工作逻辑：它分配的是容器中剩余空间的比例，而不是元素最终尺寸的比例。结合你的代码场景，我们一步步看：

1. 你的代码实际运行逻辑 #

你的容器设置了flex-wrap:wrap，每个.box的flex-basis:500px——这个属性定义了元素在分配剩余空间之前的初始基准宽度。

假设你的屏幕宽度是1200px：

• 每行最多能放下2个500px的盒子（2*500=1000px），容器剩余空间是1200-1000=200px。
• 第一行的box1和box2，flex-grow都是1，所以各分100px，最终宽度是500+100=600px。
• 第二行的box3（flex-grow:10）和box4（flex-grow:1），剩余空间同样是200px，这部分会按10:1的比例分配：box3拿到≈181.8px，box4拿到≈18.2px。最终box3宽度≈681.8px，box4≈518.2px，显然不是10倍关系。

2. flex-grow的正确计算公式 #

元素最终宽度 = flex-basis + (容器剩余空间 × (当前元素flex-grow值 ÷ 所有同行元素flex-grow之和))

只有当flex-basis:0时，元素的最终宽度才会严格遵循flex-grow的比例——因为这时候初始基准宽度为0，剩余空间就是容器的总宽度，分配后直接是比例关系。

3. flex-grow是否受flex-basis影响？ #

当然受影响，而且是决定性影响：

• flex-basis是flex元素的"初始起跑线"，flex-grow只能在这个基准之上分配剩余空间。
• 如果flex-basis设置的数值已经接近甚至占满容器可用宽度，那flex-grow根本没有剩余空间可以分配，所有元素的宽度就等于flex-basis（除非容器宽度不足触发换行）。

实现你预期效果的方法 #

如果想让box3的最终宽度是box4的10倍，最简单的方案是把所有box的flex-basis设为0：

.container { 
  display:flex; 
  flex-wrap:wrap; 
}
.box { 
  flex-basis:0; 
  flex-grow:1; 
}
.box3 { 
  flex-grow:10; 
}

这样设置后，所有元素的初始宽度为0，剩余空间会严格按flex-grow的比例分配，box3的宽度就会是box4的10倍（前提是容器宽度足够放下它们，或者你接受换行后的比例逻辑）。

内容的提问来源于stack exchange，提问作者zmii