flex-grow

版本：CSS3

CSS属性flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。主尺寸是项的宽度或高度，这取决于flex-direction值。剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。flex-grow与其他的flex属性flex-shrink和flex-basis一起使用，通常使用flex速记来定义，以确保所有的值都被设置。

示例

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

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

浏览器支持

IE11以上版本的浏览器都支持flex-grow

语法

flex-grow:<number>

取值

• <number>：参见<number>。负值无效，默认为0。

说明：

设置或检索弹性盒的扩展比率。

• 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
• flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
• 对应的脚本特性为flexGrow。

示例：b,c将按照1:3的比率分配剩余空间

<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
.flex li:nth-child(1){width:200px;}
.flex li:nth-child(2){flex-grow:1;width:50px;}
.flex li:nth-child(3){flex-grow:3;width:50px;}

本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3。flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：

• a: 50+(300/4)=200px
• b: 50+(300/4*1)=125px
• a: 50+(300/4*3)=275px

实例

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

//HTML
<div id="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

//CSS
#main{
 width:450px;
 height:300px;
 border:1px solid #ccc;
 display:-webkit-flex;
 display:flex;
}

#main div:nth-of-type(1){flex-grow:1;}
#main div:nth-of-type(2){flex-grow:3;}
#main div:nth-of-type(3){flex-grow:1;}

效果图：