Flexbox 是 CSS3 新增的一种布局模式，而 flex-grow 属性则是其中的一个重要属性。通过 flex-grow 属性，我们可以实现比例分配，快速实现页面元素的弹性布局与响应式设计。下面，我们将详细讲解如何利用 flex-grow 属性实现比例分配。
Flexbox 简介
在介绍 flex-grow 属性之前，先让我们回顾一下 Flexbox 的基本概念。
Flexbox 是一种弹性布局，它可以将一行或一列的子元素自动对齐，并且能够快速实现垂直居中、等分布局、自适应布局等功能。
Flexbox 的基本概念如下：
- Flex 容器：用来包含子元素的容器。
- Flex 行（或轴）：Flex 容器内的子元素所在的行或轴。
- Flex 子元素：Flex 容器内的子元素。
Flexbox 有两个轴，主轴和交叉轴。主轴是子元素的排列方向，可以是横向或纵向；交叉轴则是与主轴垂直的轴，用于调整子元素在主轴上的排列方式。主轴和交叉轴的方向也可以通过设置 Flexbox 的属性来进行修改。
flex-grow 属性简介
flex-grow 属性可以用来指定 Flex 子元素的放大比例。如果一个子元素的 flex-grow 值为 1，而其他子元素的 flex-grow 值为 2 和 3，那么这个子元素的宽度将会是其他子元素宽度的一半，因为它的 flex-grow 值仅仅是其他子元素的总和的一半。如果一个子元素的 flex-grow 值为 0，那么它不会被放大。
flex-grow 属性的语法如下：
flex-grow: value;
其中，value 为一个数字，用来指定子元素的放大比例。
如何利用 flex-grow 属性实现比例分配
下面我们通过一个简单的案例来演示如何利用 flex-grow 属性实现比例分配。
我们首先创建一个容器，然后在容器内放置三个子元素，分别代表“左”，“中”，“右”三个部分。我们需要实现“左”和“右”部分的宽度为固定值，而“中”部分的宽度则自适应填充。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- -------------- ------ ---------------- ---------- - -------- ----- ------ ----- ------- --- ----- ----- - ----- - ------ ------ ----------------- ------ - ------ - ------ ------ ----------------- ------- - ------- - ----------------- ----- ---------- -- - -------- ------- ------ ---- ------------------ ---- ------------------------- ---- --------------------------- ---- -------------------------- ------ ------- -------展开代码
我们可以看到，左右两个部分的宽度分别为 100px 和 150px，而中间部分填充剩余宽度。实现了比例分配。
总结
通过以上例子，我们知道了 flex-grow 属性的作用以及如何利用它实现比例分配。在实际开发中，Flexbox 已经成为一种非常实用的布局方式，帮助开发者轻松实现复杂布局，提高页面设计的效率。
值得注意的是，Flexbox 的兼容性还不是很理想，目前主流浏览器的支持情况如下：
因此，在使用 Flexbox 的时候，我们需要根据项目实际情况选择是否使用它，或者在需要兼容旧版浏览器时使用其他方式来实现相应的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6500092b95b1f8cacde3e058
