flex-grow

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: revert-layer;
flex-grow: unset;

flex-grow 属性指定为单个 <number>。

<number>

请参阅 <number>。负值无效。默认为 0，这将阻止弹性项目增长。

此属性指定应分配给该项目的弹性容器中剩余空间的多少（弹性增长因子）。

根据 flex-direction 值，主尺寸 是项目的宽度或高度。

剩余空间或正向自由空间是弹性容器的大小减去所有弹性项目的大小之和。如果所有兄弟项目具有相同的弹性增长因子，则所有项目都将获得相同比例的剩余空间。常见的做法是设置 flex-grow: 1，但将所有弹性项目的弹性增长因子设置为 88、100、1.2 或任何大于 0 的值将产生相同的结果：该值是一个比率。

如果 flex-grow 值不同，则正向自由空间将根据不同弹性增长因子定义的比率进行分配。所有兄弟弹性项目的 flex-grow 因子值加在一起。然后，弹性容器的正向自由空间（如果有）除以该总和。每个具有大于 0 的 flex-grow 值的弹性项目的主尺寸将增加商乘以其自己的增长因子。

例如，如果四个 100px 的弹性项目位于 700px 的容器中，并且弹性项目分别具有 0、1、2 和 3 的弹性增长因子，则这三个项目的主尺寸总和为 400px，这意味着有 300px 的正向自由空间要分配。共有 6 个增长因子（3 + 2 + 1），因此每个增长因子等于 50px（(300px / 6 )）。每个弹性项目获得的正向自由空间量等于此数量乘以其 flex-grow 值，因此分别为 0、50px、100px 和 150px。因此，弹性项目的大小总和分别为 100px、150px、200px 和 250px。

flex-grow 通常与其他 flex 简写属性、flex-shrink 和 flex-basis 一起使用。建议使用 flex 简写属性来确保设置所有值。

flex-grow = 
  <number [0,∞]>  

在这个示例中，总共有八个伸展因子分布在六个弹性项目中，这意味着每个伸展因子占剩余空间的12.5%。

HTML

<h1>This is a <code>flex-grow</code> example</h1>
<p>
  A, B, C, and F have <code>flex-grow: 1</code> set. D and E have
  <code>flex-grow: 2</code> set.
</p>
<div id="content">
  <div class="small" style="background-color:red;">A</div>
  <div class="small" style="background-color:lightblue;">B</div>
  <div class="small" style="background-color:yellow;">C</div>
  <div class="double" style="background-color:brown;">D</div>
  <div class="double" style="background-color:lightgreen;">E</div>
  <div class="small" style="background-color:brown;">F</div>
</div>

CSS

#content {
  display: flex;
}

div > div {
  border: 3px solid rgb(0 0 0 / 20%);
}

.small {
  flex-grow: 1;
}

.double {
  flex-grow: 2;
  border: 3px solid rgb(0 0 0 / 20%);
}

结果

当六个弹性项目沿容器的主轴线分布时，如果这些弹性项目的主内容总和小于容器主轴线的大小，则剩余空间将分配给尺寸弹性项目，其中A、B、C和F分别获得剩余空间的12.5%，而D和E分别获得剩余空间的25%。

• flex 简写
• Flexbox 的基本概念
• 控制弹性项目沿主轴线的比例
• CSS 弹性盒布局 模块
• flex-grow 很奇怪。还是它不是？ 通过 CSS-Tricks (2017)