当您将 Flex-Basis 视为百分比时，为什么 Flex Grow 不这样做呢？

Question

我还检查了各种文档，但无法理解下面代码中的逻辑。 假设我们为 Flex-Basis 提供了 25%。 正如您所看到的，当我们将 Flex-Grow 0.25 分配给具有相同功能的另一个盒子时，尺寸是不同的，但不应该是相同的吗？

另外，使用弹性基数作为百分比和使用弹性增长之间有什么区别？ 非常感谢您提前关注。

 html body { box-sizing: border-box; margin: 0; padding: 0; }.container { width: 90%; margin: 2em auto; height: 35px; display: flex; background: rgb(51, 153, 73); }.box { flex-basis: auto; background: rgb(160, 166, 221); }.second { flex-basis: 25%; }.third { flex-grow: 0.25; }

 <div class="container"> <div class="box first">First Box</div> </div> <div class="container"> <div class="box second">Second Box</div> </div> <div class="container"> <div class="box third">Third Box</div> </div>

Answer 1

如果您使用flex-grow定义flex-basis:0 ，您可以获得相同的结果。

flex-basis:25%表示占用总宽度的25% ，而flex-grow:0.25表示占用25%的可用空间 + 初始宽度。 如果您将初始宽度设为0 （使用flex-basis:0 ），那么25%的可用空间将等于总宽度的25%

 html body { box-sizing: border-box; margin: 0; padding: 0; }.container { width: 90%; margin: 2em auto; height: 35px; display: flex; background: rgb(51, 153, 73); }.box { flex-basis: auto; background: rgb(160, 166, 221); }.second { flex-basis: 25%; }.third { flex-grow: 0.25; flex-basis: 0; }

 <div class="container"> <div class="box first">First Box</div> </div> <div class="container"> <div class="box second">Second Box</div> </div> <div class="container"> <div class="box third">Third Box</div> </div>