--- title: flex-grow slug: Web/CSS/flex-grow tags: - CSS属性 - CSS弹性盒 - 布局 - 网络 translation_of: Web/CSS/flex-grow ---
{{CSSRef}}

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

主尺寸是项的宽度或高度，这取决于{{cssxref("flex-direction")}}值。

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

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

{{EmbedInteractiveExample("pages/css/flex-grow.html")}}

更多属性和信息请参见使用 CSS 弹性盒子。

语法

CSS 属性值定义语法: {{csssyntax("flex-grow")}}

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

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

值

<number>
参见 {{cssxref("<number>")}}。负值无效，默认为0。

正式语法

{{csssyntax}}

例子：

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);
}

结果

{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}

规范

规范 状态 备注
CSS灵活包装盒布局模块 {{Spec2('CSS3 Flexbox')}} 初步定义

{{cssinfo}}

浏览器兼容性

{{Compat("css.properties.flex-grow")}}

参见