子元素最终宽度由基础宽度和flex-grow分配的剩余空间决定。首先计算容器可用空间与子元素基础宽度总和，得出剩余空间；再按flex-grow比例分配该空间，加权至各子元素。例如容器600px，两子元素分别宽100px、200px且flex-grow为1和2，则剩余300px按1:2分配，最终宽度为200px和400px。注意min-width、max-width及flex-basis会覆盖width影响计算结果。
在 CSS Flexbox 布局中，子元素的最终宽度不仅由自身内容或设定的 width 决定，还会受到 flex-grow 属性的影响。理解其计算方式有助于精准控制布局。
flex-grow 的作用机制
flex-grow 定义了当容器有剩余空间时，子元素如何按比例分配这些空间。它不影响内容本身的宽度，而是决定“可伸展”的程度。
默认值为 0，表示不伸展；设为大于 0 的数值时，子元素将按比例占用剩余空间。
宽度计算步骤
Flex 子元素的最终宽度是基于以下步骤计算得出的：
立即学习“前端免费学习笔记（深入）”；
- 确定主轴方向和容器可用空间：比如水平排列时，容器宽度减去所有边距、边框、间隙后得到可用总空间。
- 计算各子元素的基础主轴尺寸（main size）：通常是 width 或 min-width/max-width 限制下的实际宽度，若未设置 width，则基于内容大小（即 content-based size）。
- 汇总所有子元素的基础宽度，然后从容器总宽度中减去这个总和，得到“剩余空间”。
- 根据 flex-grow 比例分配剩余空间：每个子元素额外获得的空间 = 剩余空间 × (自身 flex-grow 值 / 所有子元素 flex-grow 总和)。
- 最终宽度 = 基础宽度 + 分配到的额外空间。
示例说明
假设容器宽 600px，两个子元素：
.container {
display: flex;
}
.item1 {
width: 100px;
flex-grow: 1;
}
.item2 {
width: 200px;
flex-grow: 2;
}
计算过程如下：
- 基础宽度总和：100 + 200 = 300px
- 剩余空间：600 - 300 = 300px
- flex-grow 总和：1 + 2 = 3
- item1 分配：300 × (1/3) = 100px → 最终宽度：100 + 100 = 200px
- item2 分配：300 × (2/3) = 200px → 最终宽度：200 + 200 = 400px
注意事项
某些情况下会影响上述计算逻辑：
- 设置了 min-width 或 max-width 会限制伸展范围，即使 flex-grow 允许更多空间，也不会超出这些边界。
- 如果某个子元素的 flex-basis 被显式设置（如 flex: 1 0 150px），则以 flex-basis 的值作为基础宽度，而非 width。
- 使用 flex: 1 等简写时，相当于 flex: 1 1 0%，此时基础宽度为 0，整个容器空间完全按 flex-grow 分配。
基本上就这些。掌握 flex-grow 的分配逻辑，能更准确地预测和控制弹性布局中的宽度表现。
