CSS flex布局之 flex-grow 属性

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

实例一:

<style>
	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>
	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>

以上实例,设置 <span> 的宽度为 100px,但是存在剩余空间。 相关 <span> 设置了flex-grow,"2" 和 "3" 按比例 1:2 瓜分剩余空间。 结果就是 "1" : "2" : "3" = 100px : 200px : 300px 。

JavaScript 语法:

object.style.flexGrow="2"