在现代 Web 开发中，Flex 布局已经成为了一种非常流行的布局方式，它可以帮助我们轻松地实现各种复杂的布局效果。而其中的 flex-grow 属性则是实现 Flex 布局的关键之一。
什么是 Flex 布局？
Flex 布局是一种基于弹性盒子模型的布局方式，它可以让容器中的子元素自动适应容器的大小，并按照一定的规则排列。Flex 布局中有三个重要的概念：
- 容器（flex container）：包含了一组子元素的父元素，应用 Flex 布局的元素就是容器。
- 子元素（flex item）：容器中的每个子元素都是一个 flex item。
- 轴（axis）：在 Flex 布局中，有两个轴，一个是主轴（main axis），一个是交叉轴（cross axis）。主轴是 Flex 容器的主要方向，而交叉轴则是与主轴垂直的方向。
什么是 flex-grow 属性？
flex-grow 属性用于设置 flex item 的放大比例，它表示当容器中还有剩余空间时，该元素占据剩余空间的比例。比如，如果一个容器中有三个 flex item，它们的 flex-grow 属性分别为 1、2、3，那么当容器中还有剩余空间时，第一个元素将会占据 1/6 的空间，第二个元素将会占据 2/6 的空间，第三个元素将会占据 3/6 的空间。
flex-grow 属性的默认值为 0，即元素不会自动放大。如果某个元素的 flex-grow 属性值为 1，那么它会尽可能地占据剩余空间。如果某个元素的 flex-grow 属性值为 2，那么它会占据剩余空间的两倍，以此类推。
如何使用 flex-grow 属性？
要使用 flex-grow 属性，我们需要先将元素的 display 属性设置为 flex 或 inline-flex。然后，我们可以在元素的样式中添加 flex-grow 属性来设置元素的放大比例。下面是一个简单的示例：
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ - ----- - ---------- -- ------- --- ----- ----- - ------ - ----------------- ---- - ------ - ----------------- ------ - ------ - ----------------- ----- -
在这个示例中，我们将 .container 元素的 display 属性设置为 flex，然后将每个子元素的 flex-grow 属性都设置为 1。这样，当容器中还有剩余空间时，每个子元素都会平均分配剩余空间。我们还给每个子元素设置了不同的背景色，以便更好地区分它们。
总结
flex-grow 属性是实现 Flex 布局的重要属性之一，它可以帮助我们轻松地实现元素的自适应布局。在使用 flex-grow 属性时，我们需要注意元素的 display 属性必须设置为 flex 或 inline-flex。同时，我们还可以通过设置不同的 flex-grow 属性值来控制元素的放大比例，从而实现更加灵活的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65069ea195b1f8cacd2630fe