1. 什么是 flex-grow 属性？
在 CSS 中，我们经常需要对页面的布局进行调整，并且需要让元素自动适应容器的大小，这时候 flex-grow 属性就能派上用场了。
flex-grow 属性指定弹性容器中的项目放大比例，默认为 0，即如果存在剩余空间，也不放大任何项目。
使用 flex-grow 属性后，可使某一元素自适应容器大小，并占据多余的空间。下面的示例中，flex-grow 属性为 1，代表该元素可以占据剩余的空间，flex-shrink 属性为 1，代表如果空间不够用，该元素就缩小。
.container {
display: flex;
height: 100px;
}
.item {
background-color: #f44336;
flex-grow: 1;
flex-shrink: 1;
}
2. flex-grow 属性的使用方法
flex-grow 属性应用于弹性容器中的弹性项目，在容器中使用 display: flex 或者 display: inline-flex 就能开启弹性容器模式。下面是一个使用 flex-grow 属性的例子：
.container {
display: flex;
height: 200px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.item {
background-color: #4CAF50;
color: white;
margin: 10px;
flex-basis: 20%;
flex-grow: 1;
}
上述样式表中，我们设置了一个 flex 容器，容器的高度为 200px，元素在容器内的水平对齐方式为 space-between，垂直对齐方式为 align-items: center, 并且弹性项目可以换行（wrap）。每个项目的基础宽度为 20%，具体宽度则由 flex-grow 属性进行控制。
2.1 flex-grow 属性的取值
flex-grow 属性的取值范围为非负整数，摆脱 math-box 的限制，flex-grow 值越大，对剩余空间的占有就越大。
注意：如果弹性容器中的所有元素的 flex-grow 属性值都为 1，则它们将平均分配剩余空间。如果有多个 flex-grow 属性值不同时，剩余空间的分配将根据它们的大小进行分配。
2.2 实例演示
下面我们来看一个实例，使用 flex-grow 属性控制弹性容器中子元素所占空间比例：
.container {
display: flex;
justify-content: center;
}
.item1 {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 200px;
}
.item2 {
background-color: #2196F3;
color: white;
padding: 20px;
flex-grow: 1;
}
.item3 {
background-color: #f44336;
color: white;
padding: 20px;
width: 100px;
}
在上述代码中，我们设置了三个弹性项目，其中第二个项目设置了 flex-grow: 1，代表该元素可以占据剩余的空间，第一个元素和第三个元素的宽度都是固定的，不随容器大小调整而调整。下面是本例的演示结果：
3. 总结
本文介绍了 flex-grow 属性的定义、使用方法、取值范围及实例演示。在实际开发中，flex-grow 属性可以轻松实现弹性容器中弹性项目的自适应，是一项必不可少的 CSS 技能。