flex-grow - CSS（层叠样式表）编辑

CSS属性 flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。

主尺寸是项的宽度或高度，这取决于flex-direction值。

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。

flex-grow 与其他的flex属性flex-shrink和flex-basis一起使用，通常使用flex 速记来定义，以确保所有的值都被设置。

该交互式示例的源存储在GitHub存储库中。如果您想为交互式示例项目做出贡献，请克隆https://github.com/mdn/interactive-examples并向我们发送请求请求。

语法

CSS 属性值定义语法: <number>

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

/* 全局 values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

值

<number>: 参见 <number>。负值无效，默认为0。
正式语法 <number>

例子：

HTML

<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

CSS

#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0,0,0,.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0,0,0,.2);
}