css中的flex-grow是flex布局里用于定义弹性盒子子元素放大比例的属性，当弹性容器存在剩余空间时，该属性会决定子元素如何分配这些剩余空间，是flex布局实现自适应排列的核心属性之一。
flex-grow的基本定义
flex-grow是flex_item（弹性盒子的子元素）的可选属性，默认值为0，取值为非负数字。它的作用是规定当前子元素相对于其他子元素的放大比例，当弹性容器的主轴方向还有剩余空间时，子元素会根据flex-grow的取值来分配这些剩余空间。
需要注意的是，flex-grow只有在弹性容器存在剩余空间时才会生效，如果容器空间已经被子元素占满，该属性不会产生任何效果。
flex-grow的取值规则
- 取值为0：默认值，表示即使容器有剩余空间，该子元素也不会放大，保持自身的初始尺寸。
- 取值为大于0的数字：表示子元素会按照比例分配剩余空间，数值越大，分配到的剩余空间越多。
- 取值为小数：同样按照比例分配，比如0.5表示分配到的空间是取值为1的子元素的一半。
flex-grow的空间计算逻辑
剩余空间的分配计算遵循以下逻辑：
- 先计算弹性容器的主轴剩余空间：容器主轴尺寸减去所有子元素的初始主轴尺寸总和。
- 计算所有子元素的flex-grow取值总和。
- 每个子元素分配到的剩余空间 = 剩余空间 × (当前子元素的flex-grow值 / 所有子元素flex-grow值总和)。
- 子元素的最终尺寸 = 子元素初始尺寸 + 分配到的剩余空间。
代码示例演示
基础示例：不同flex-grow取值的表现
下面的代码创建了一个水平方向的弹性容器，内部有三个子元素，分别设置不同的flex-grow值，观察它们的宽度变化：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-grow示例</title>
<style>
.container {
display: flex;
width: 600px;
height: 100px;
border: 1px solid #ccc;
}
.item {
height: 80px;
color: #fff;
text-align: center;
line-height: 80px;
}
.item1 {
flex-grow: 0;
width: 100px;
background-color: #f56c6c;
}
.item2 {
flex-grow: 1;
width: 100px;
background-color: #67c23a;
}
.item3 {
flex-grow: 2;
width: 100px;
background-color: #409eff;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">flex-grow:0</div>
<div class="item item2">flex-grow:1</div>
<div class="item item3">flex-grow:2</div>
</div>
</body>
</html>
在这个例子中，容器宽度是600px，三个子元素初始宽度都是100px，总初始宽度是300px，剩余空间为300px。flex-grow总和是0+1+2=3，所以item2会分配到300×(1/3)=100px剩余空间，最终宽度是200px；item3会分配到300×(2/3)=200px剩余空间，最终宽度是300px；item1不分配剩余空间，保持100px宽度。
所有子元素flex-grow都为1的场景
当所有子元素的flex-grow都设为1时，剩余空间会被平均分配：
.container {
display: flex;
width: 600px;
border: 1px solid #ccc;
}
.item {
flex-grow: 1;
height: 80px;
width: 50px; /* 初始宽度 */
background-color: #909399;
margin: 0 5px;
}
这里三个子元素初始宽度都是50px，总初始宽度150px，剩余空间450px，每个子元素分配到150px剩余空间，最终每个子元素宽度为200px，实现等宽分配剩余空间的效果。
注意事项
- flex-grow只对弹性盒子的直接子元素生效，嵌套的子元素不会受影响。
- 如果同时设置了
flex-grow和flex-shrink，flex-shrink会在容器空间不足时控制子元素缩小，两者不会冲突。 - flex-grow的优先级低于
min-width和max-width，如果子元素设置了最大宽度，即使分配了剩余空间，也不会超过最大宽度限制。
flex-grow是flex布局中控制空间分配的核心属性，理解它的计算逻辑后，就能灵活实现各种自适应的布局效果，比如侧边栏固定、内容区自适应等常见场景。