简介

CSS flex-grow 属性定义弹性盒子项(flex item)的拉伸因子。

初始值0
适用元素flex items, including in-flow pseudo-elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typea number
正规顺序the unique non-ambiguous order defined by the formal grammar

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

语法

CSS 属性值定义语法: <number>
flex-grow: 3

flex-grow: inherit

<number>
参见<number>。负值无效。

Example

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 {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  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);
}

Result

规范

规范 状态 备注
CSS Flexible Box Layout Module Candidate Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 18.0 (18.0) (behind a pref) [1]
20.0 (20.0)
21.0-webkit (Yes)-webkit
(Yes)
11 12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support ? ? (Yes)-webkit
(Yes)
未实现 12.10 未实现

[1] Firefox 在 Firefox 28以前只支持单行弹性盒。Firefox 18和19的用户需要把 about:config 的 "layout.css.flexbox.enabled" 改为true以启用弹性盒支持。

[2] 在 Firefox 32 之前, Gecko 不能动画过渡始于或止于 0 的值。

参见

文档标签和贡献者

 此页面的贡献者: zhicongyang, dongyu_-_, Sebastianz, fscholz, fskuok, teoli, Ribery
 最后编辑者: zhicongyang,