什么是 Flexbox？
Flexbox 是 CSS3 引入的一种新的布局模式，可以方便地实现弹性盒子布局。它可以让我们更轻松地控制容器内元素的排列方式、对齐方式、排序方式等等，适用于响应式布局。
flex-grow 属性是什么？
flex-grow 是 Flexbox 中的一个属性，用于控制元素的放大比例。
当容器中存在多个元素时，如果容器的尺寸比其中的元素小，那么元素会被压缩。如果指定了一个元素的 flex-grow 属性，该元素会优先扩大，直到填满剩余空间。
flex-grow 的默认值为 0，也就是说，如果不显式指定元素的 flex-grow 属性，它不会自动扩大。
如何使用 flex-grow？
下面是一个示例，展示了如何使用 flex-grow：
<div class="container"> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ - ---- - ------ ------ - ----- - ----------------- ---- - ----- - ----------------- ------ - ----- - ----------------- ----- -
这段代码定义了一个高度为 300px 的容器，包含了三个宽度为 100px 的元素。容器采用 flex 布局。此时，三个元素会平分容器的宽度，并排在一排。
如果我们想让第二个元素（绿色背景的元素）在宽度不足时，优先扩大，填满剩余空间，可以这样设置：
.box2 {
background-color: green;
flex-grow: 1;
}这时，第二个元素就会优先扩大，填满剩余空间，而其他两个元素的宽度不变。如果给第一个和第三个元素分别设置 flex-grow 属性为 1，三个元素就会平分容器的宽度。
总结
通过使用 flex-grow 属性，我们可以轻松地控制元素在容器中的放大比例，实现动态布局效果。在实际项目中，我们可以根据具体需求，合理地使用 flex-grow 属性，提高代码的灵活性和可维护性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fdc7f695b1f8cacdcf919c