flex-grow

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

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

尝试一下

语法

满足CSS 属性值定义语法

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

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>

参见 <number>。负值无效,默认为 0。

描述

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

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

flex-grow 与其他的 flex 属性 flex-shrinkflex-basis 一起使用,通常使用 flex 简写来定义,以确保所有的值都被设置。

正式定义

初始值0
适用元素flex items, including in-flow pseudo-elements
是否是继承属性
计算值as specified
动画类型a number

正式语法

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

样例

设置 flex 项目增长因子

HTML

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

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

结果

规范

Specification
CSS Flexible Box Layout Module Level 1
# flex-grow-property

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-grow
<0 animate
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见