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
默认值 | 0 |
适用于 | flex项,包括in-flow伪元素 |
继承性 | 无 |
动画性 | visual |
计算值 | 指定值 |
实例
//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;}
效果图: