CSS flex布局之 flex-shrink 属性

flex-shrink 设置在项目上。属性定义了项目的缩小比例。默认为1,表示空间不足时,该项目将缩小。

实例一 :

<style>
	div{ display: flex; }
	span{	width: 200px; }
	.sp{flex-shrink:0}
</style>
<div>
	<span class="sp">1</span>
	<span>2</span>
	<span>3</span>
</div>

以上实例,设置 "1" flex-shrink:0,结果就是当宽度不足时,"1"的宽度不缩小,还是200px,其他元素缩小。

实例二 :

<style>
	div{ display: flex; width: 600px;}
	span{	width: 300px; }
	.sp{flex-shrink:2}
</style>

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

以上实例,当宽度不足时,"1" 减少的宽度是"2" 和 "3" 的2倍。结果就是"1" : "2" : "3" = 150px : 225px : 225px。

JavaScript 语法:

object.style.flexShrink="2"