CSS flex 布局(入门)- flex-grow 放大比例

flex-grow 属性设置在项目上,定义项目的放大比例。默认为0,即如果存在剩余空间,也不放大。

实例一:

<style type="text/css">
	div{ display: flex; }
	span{	width: 100px; }
	.sp{ flex-grow:1; }
</style>

<div>
	<span>1</span>
	<span class="sp">2</span>
	<span>3</span>
</div>

以上实例中,当存在剩余空间时,"1" 和 "3" 宽度不变,"2" 占满剩余空间。

实例二:

<style type="text/css">
	div{ display: flex; width: 600px;}
	span{	width: 100px; }
	.sp2{ flex-grow:1; }
	.sp3{ flex-grow:2; }
</style>

<div>
	<span class="sp1">1</span>
	<span class="sp2">2</span>
	<span class="sp3">3</span>
</div>

以上实例,若存在剩余空间,那么"1"是固定宽度100px,"2" 和 "3" 按比例 1:2 瓜分剩余空间。 结果就是 "1" : "2" : "3" = 100px : 200px : 300px 。

兼容性 :

属性 IE Chrome Firefox Safari Opera
flex-grow 10.0 -ms-
11.0
21.0 -webkit-
29.0
18.0 -moz-
28.0
6.1 -webkit-
9.0
17.0

JavaScript 语法:

object.style.flexGrow="2"