CSS flex-grow
CSS flex-grow
CSS
flex-grow 属性用于指定Flex项目在有可用空间时应占用的空间。剩余空间可以定义为伸缩容器大小减去所有伸缩项目的大小之和。
flex-grow 属性用于指定Flex项目在有可用空间时应占用的空间。剩余空间可以定义为伸缩容器大小减去所有伸缩项目的大小之和。
此属性定义一个项目与其他项目相比将在容器内增长多少。可以将其定义为一个项目与容器中其他项目相比增长的能力。
例如，如果我们将所有项目的
flex-grow 设置为1 ，则容器中的每个项目都将设置为相等的大小。但是，如果我们给任何一项赋值为2，则相应的项所占空间将是其他项的两倍。
flex-grow 设置为1 ，则容器中的每个项目都将设置为相等的大小。但是，如果我们给任何一项赋值为2，则相应的项所占空间将是其他项的两倍。
它设置了flex增长因子（一个数字，决定了flex-item的数量）将增长）的弹性项目。此 CSS属性用于增加flex-item的大小。它仅适用于弹性项目，因此，如果容器的项目不是弹性项目，则
flex-grow 属性将不会影响相应的项目。通常，此CSS属性与
flex-shrink 和
flex-basis 的其他flex属性一起使用，通常由flex的简写形式，以确保设置了所有值。
flex-grow 属性将不会影响相应的项目。通常，此CSS属性与
flex-shrink 和
flex-basis 的其他flex属性一起使用，通常由flex的简写形式，以确保设置了所有值。
语法
flex-grow: number| initial | inherit;
值
number：它是确定弹性增长因子的正数。它的默认值为0，不允许为负值。设置为零时，即使有可用空间，该项目也不会增长。元素将占用所需的空间。
initial：它将此属性设置为其默认值。
inherit：它从其父元素继承此属性。
示例
在此示例中，有两个容器，我们设置了
flex-grow: 0 ; 用于第一个容器的所有项目，
flex-grow: 1; 用于第二个容器的所有项目。我们可以看到
flex-grow: 0; 的项目占用了它们所需的空间，而
flex-grow: 1; 的项目占用了相同大小的剩余空间。
flex-grow: 0 ; 用于第一个容器的所有项目，
flex-grow: 1; 用于第二个容器的所有项目。我们可以看到
flex-grow: 0; 的项目占用了它们所需的空间，而
flex-grow: 1; 的项目占用了相同大小的剩余空间。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: -webkit-flex;
display: flex;
background-color: green;
}
.flex-item {
background-color: lightgreen;
text-align: center;
font-size: 25px;
width: 100px;
height: 100px;
padding-top: 20px;
margin: 5px;
}
</style>
</head>
<body>
<h1> flex-grow: 0; </h1>
<div class="container">
<div class="flex-item" style = "flex-grow: 0;"> flex-item 1 </div>
<div class="flex-item" style = "flex-grow: 0;"> flex-item 2 </div>
<div class="flex-item" style = "flex-grow: 0;"> flex-item 3 </div>
</div>
<h1> flex-grow: 1; </h1>
<div class="container">
<div class="flex-item" style = "flex-grow: 1;"> flex-item 1 </div>
<div class="flex-item" style = "flex-grow: 1;"> flex-item 2 </div>
<div class="flex-item" style = "flex-grow: 1;"> flex-item 3 </div>
</div>
</div>
</body>
</html>
输出
示例
在此示例中，我们在flex-items上设置了不同的flex-grow值。有两个容器，每个都有五个伸缩项目。在这里，某些弹性项目比其他弹性项目大。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: -webkit-flex;
display: flex;
background-color: green;
margin: 20px;
}
.flex-item {
background-color: lightgreen;
text-align: center;
font-size: 25px;
width: 100px;
height: 100px;
padding-top: 20px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="flex-item" style = "flex-grow: 0;"> 1 </div>
<div class="flex-item" style = "flex-grow: 4;"> 2 </div>
<div class="flex-item" style = "flex-grow: 0;"> 3 </div>
<div class="flex-item" style = "flex-grow: 6;"> 4 </div>
<div class="flex-item" style = "flex-grow: 1;"> 5 </div>
</div>
<div class="container">
<div class="flex-item" style = "flex-grow: 1;"> 1 </div>
<div class="flex-item" style = "flex-grow: 9;"> 2 </div>
<div class="flex-item" style = "flex-grow: 1;"> 3 </div>
<div class="flex-item" style = "flex-grow: 9;"> 4 </div>
<div class="flex-item" style = "flex-grow: 1;"> 5 </div>
</div>
</div>
</body>
</html>
输出
