弹性成长 |极客

内容隐藏

可以应用于弹性项目的另一个属性是“弹性增长”属性。此属性指定项目在伸缩容器内应占用的空间量（如有必要）。

Flex增长因子始终与flex容器中其他项目的大小有关。

弹性成长

默认情况下，您可以看到弹性项目仅占用适合内容的空间。因此容器内有多余的空间。

有时我们不希望有额外的空白，而是希望弹性项目增加以利用剩余的空间。
默认情况下，所有flex项目的flex值都会增长0。因此，请为其中一项设置它，然后看看会发生什么。

style.css

...
.item-3 {
    background-color: #1C4C56;
    flex-grow: 1;
}
...

We have set the flex-grow: 1 to 3^rd 项，因此第三项将利用多余的空格。

注意：
为了使所有项目相等，我们可以为每个flex-items添加相同的flex-grow值。

如果我们添加类似的flex-grow值，那么空间将平均分配两个包含flex-grow属性的项目。
我们还可以通过增加整数值来为包含属性的项目提供不同的空间。

style.css

...
.item-6 {
    ...
    flex-grow: 1;
}
.item-7 {
    ...
    flex-grow: 3;
}
...

现在item-7占用的空间是item-6的3倍。

注意：
该属性还接受十进制值，但请确保不要放置负值。

因此，该属性决定了项目应在flex容器内占用的可用空间量。
弹性增长因子也相对于容器中的其他项目。默认情况下，值为0，表示该项目不应增长。
即使容器中有其他空间，在所有伸缩项目上将值设置为1也会导致伸缩项目增长。