flex-shrink 属性决定元素的是否缩小, 默认为 1, 不缩小

flex-shrink 是给弹性盒子的子元素设置,设置的元素的父元素必须是 flex 属性

与之相反的有一个放大属性 —— flex-grow

1
2
3
4
当所有的 flex-shrink 属性都为 1, 在空间不足时都将等比例缩小。如果一个元素的 flex-shrink 属性为 0, 其他项目都为 1, 则空间不足时前者不缩小。
<style type="text/css">
	.main.flex-shrink .child{
		flex-grow :  1; /* 平分整个父元素空间 */
		flex-shrink: 1; /* 默认缩小比例 */
		flex-basis: 500px;
	}
	.main.flex-shrink .child.shrink-3 {
	    -webkit-flex-shrink: 3; 
	    flex-shrink: 3;
	}
</style>


<div class="main flex-shrink">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
</div>