CSS flex-grow 属性

CSS flex-grow 语法

在 CSS 中，flex-grow 属性用于定义弹性容器中子元素的放大比例。也就是当所有子元素宽度之和小于父元素的宽度时，子元素如何分配父元素的剩余空间。

语法：

flex-grow: 数值;

说明：

flex-grow 属性取值是一个数值，默认值为 0。当取值为 0 时，表示不索取父元素的剩余空间。当取值大于 0 时，表示索取父元素的剩余空间（即子元素放大）。取值越大，索取得越多。

举个例子，父元素下有两个子元素：A 和 B。其中父元素宽 400px，A 宽为 100px，B 宽为 200px。那么父元素的剩余空间为 400-100-200=100px。

如果 A 索取，B 不索取。其中 A 设置 flex-grow: 1，那么最终 A 的宽为 100+100=200px，B 的宽不变还是 200px。
如果 A 和 B 同时索取剩余空间，其中 A 设置 flex-grow: 1，B 设置 flex-grow:1，那么最终 A 的宽为 100+100×[1/(1+1)]=150px，B 的宽为 200+100×[1/(1+1)]=250px。
如果 A 和 B 同时索取剩余空间，其中 A 设置 flex-grow: 1，B 设置 flex-grow: 3，那么最终 A 的宽为 100+100×[1/(1+3)]=125px，B 的宽为 200+100×[3/(1+3)]=275px。

对于 flex-grow 属性，小伙伴们还要清楚以下几点。

flex-grow 只在弹性容器的主轴方向上有剩余空间时才会生效。如果所有子项已经填满了容器，或者子项总尺寸甚至溢出了容器，flex-grow 将不会有任何可见效果。
flex-grow 决定的是如何分配剩余空间，而不是子项的最终尺寸。子项的最终尺寸还会受到其 flex-basis、width、height 以及 flex-shrink 的影响。

注意: flex-grow 属性只能用于弹性容器的子项，即作为 display 取值为 flex 或 inline-flex 元素的子元素。

CSS flex-grow 摘要

属于	CSS flex 布局
使用频率	中
是否继承	否
默认值	0
兼容性	查看
官方文档	查看
MDN	查看

CSS flex-grow 示例

接下来，我们通过一个简单的例子来讲解一下 flex-grow 属性是如何使用的。

示例：flex-grow 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            display: flex;
            width: 200px;
            height: 100px;
        }
        .box div:nth-child(1) {
            flex-grow: 1;
            background-color: red;
        }
        .box div:nth-child(2) {
            flex-grow: 2;
            background-color: green;
        }
        .box div:nth-child(3) {
            flex-grow: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

页面效果如下图所示。

flex-grow 示例

分析：

在上面例子中，.box元素是一个弹性盒子，并且我们给它指定了宽度为 200px。由于所有子元素都没有指定宽度，因此可以将其看成：所有子元素宽度之和小于父元素的宽度。然后我们只需要使用 flex-grow 属性给每一个子元素指定一个值，浏览器就会自动根据每个子元素所占的比例来划分宽度。

当然了，你也可以将 .box 元素的宽度改为其他数值，看看效果如何？比如将弹性盒子的宽度设置为 300px 时，页面效果如下图所示。

弹性盒子的宽度设置为300px的效果

注意: 在使用 flex-grow 时，一般是不需要对弹性盒子内部的子元素定义宽度或高度的，否则会影响 flex 容器的比例分配。

flex 是一个复合属性

在 CSS 中，flex 是一个复合属性，它有 3 个子属性（如下表所示）。

flex 的子属性
子属性	说明
flex-grow	定义弹性容器中子项的增长比例，决定如何分配多余空间
flex-shrink	定义弹性容器中子项的缩小比例，决定空间不足时如何压缩
flex-basis	定义弹性容器中子项的初始大小，影响其在主轴上的基础长度