flex-grow 控制子元素在容器剩余空间中的放大比例。默认值为0，不放大；设为大于0的数值时，按比例分配空间。例如，一个元素设为1，其余为0，则独占剩余空间；两个元素均为1则平分；一个为2、另一个为1则按2:1分配。实际应用中，如三栏布局，中间搜索框设 flex-grow: 1，两侧固定宽度，可实现自适应；多个元素按设定比例伸展，如红、绿、蓝块分别设1、2、3，即按1:2:3填充容器。掌握此规则可高效实现导航、表单等场景的弹性布局。
在Flex布局中，flex-grow 属性用于控制子元素在主轴方向上的弹性放大比例。当容器有剩余空间时，子元素会根据 flex-grow 的值按比例分配这些空间。
flex-grow 基本规则
flex-grow 默认值为 0，表示不放大。如果设置为大于0的数值，元素将按照该数值的比例伸展以填充容器的剩余空间。
例如：
- 一个子元素 flex-grow: 1，其余为0 → 该元素独占剩余空间
- 两个子元素都设为 flex-grow: 1 → 平分剩余空间
- 一个设为2，另一个设为1 → 按 2:1 的比例分配剩余空间
实际案例：三栏自适应布局
假设我们有一个导航区域，左侧是logo，中间是搜索框需要尽可能宽，右侧是菜单按钮。我们可以用 flex-grow 实现中间项自动撑大。
<div class="nav"><div class="logo">Logo</div>
<div class="search">Search Box</div>
<div class="menu">Menu</div>
</div>
CSS 样式如下：
.nav {display: flex;
}
.logo, .menu {
width: 60px;
}
.search {
flex-grow: 1;
background: #eee;
margin: 0 10px;
}
这里，.search 元素的 flex-grow: 1 表示它将占据除 logo 和 menu 固定宽度之外的所有可用空间，实现自适应效果。
多个元素按比例伸展
如果有多个子元素设置了不同的 flex-grow 值，它们将按比例分配剩余空间。
比如三个等宽色块，希望红色占1份、绿色占2份、蓝色占3份：
.container {display: flex;
}
.item1 { flex-grow: 1; background: red; }
.item2 { flex-grow: 2; background: green; }
.item3 { flex-grow: 3; background: blue; }
即使初始内容很小，这三个元素也会按 1:2:3 的比例拉伸填满容器。
基本上就这些。掌握 flex-grow 的比例分配逻辑，就能轻松实现各种自适应布局需求，特别适合导航、表单、卡片组件中的空间分配场景。
