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"