flex-grow

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

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

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

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

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

语法

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

结果

规范

规范 状态 备注
CSS灵活包装盒布局模块 Candidate Recommendation 初步定义

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

浏览器兼容性

BCD tables only load in the browser

参见