w3study.net

CSS 属性 flex-grow CSS 设置 flex 项 主尺寸 的 flex 增长系数。

{{InteractiveExample("CSS Demo: flex-grow")}}

```css interactive-example-choice flex-grow: 1;

```css interactive-example-choice
flex-grow: 2;

```css interactive-example-choice flex-grow: 3;

```html interactive-example
<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">I grow</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

```css interactive-example .default-example { border: 1px solid #c5c5c5; width: auto; max-height: 300px; display: flex; }

.default-example > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: 0; }

## 语法

满足 [CSS 属性值定义语法](/zh-CN/docs/Web/CSS/Guides/Values_and_units/Value_definition_syntax) {{csssyntax("flex-grow")}}。

```css
/* <number> 值 */
flex-grow: 3;
flex-grow: 0.6;

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

flex-grow 的属性规定为一个 <number>。

值

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

描述

这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度，这取决于{{cssxref("flex-direction")}}值。

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

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

正式定义

{{cssinfo}}

正式语法

{{csssyntax}}

样例

设置 flex 项目增长因子

HTML

<h4>这展示了 flex 增长</h4>
<h5>A,B,C 和 F 具有 flex-grow:1。D 和 E 具有 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, 0.2);
}

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

结果

{{EmbedLiveSample('设置 flex 项目增长因子', '700px', '300px')}}