flex-grow用于控制弹性子元素在容器中分配剩余空间的比例。其值为无单位数字，默认0表示不伸展；当大于0时，按数值比例拉伸。例如flex-grow:1和2的两个元素将按1:2分配剩余空间。常用于等分布局、自适应侧边栏等场景，需注意仅在有剩余空间时生效，建议配合flex-basis使用以精确控制初始尺寸，提升布局灵活性。
在 CSS 中，flex-grow 属性用于控制弹性容器中的子元素如何分配剩余空间。它决定了“伸缩元素”在主轴方向上拉伸的能力。只要容器设置为 display: flex，就可以使用 flex-grow 来实现元素的伸缩布局。
flex-grow 的基本作用
flex-grow 接受一个无单位的数值（如 1、2、0），表示该元素的放大比例。默认值是 0，意味着不伸展。如果所有子元素的 flex-grow 都是 0，它们将保持原始大小，不占用多余空间。
当某个元素的 flex-grow 大于 0，它就会按比例“吃掉”容器中未被占用的空间。
实际用法示例
假设有一个容器和两个子元素：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
此时，容器内的剩余空间会按照 1:2 的比例分配给 item1 和 item2。也就是说，item2 占据的伸展空间是 item1 的两倍。
常见使用场景
-
等比例填充：多个元素都设为
flex-grow: 1，它们将平分剩余空间，适合做等宽布局。 -
一侧固定，另一侧自适应：比如左侧导航固定宽度，右侧内容区域填满剩余空间。可将右侧元素设为
flex-grow: 1，左侧不设或设为 0。 - 主导区与辅助区：通过不同 grow 值，让主要内容区域获得更多空间。
注意事项
flex-grow 只在有剩余空间时起作用。如果子元素总宽度已经超过容器，且没有设置 flex-shrink 或 flex-basis，可能不会看到预期效果。建议配合 flex-basis 使用以更精确控制初始大小。
例如：flex: 1 1 200px; 表示可以伸展、可以收缩，初始大小为 200px。
基本上就这些。合理使用 flex-grow 能让你的布局更灵活、响应性更强。不复杂但容易忽略细节。
