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"