你的位置: 前端博客 > CSS3 > CSS3弹性盒flexbox > flex-shrink

flex-shrink (适用于弹性盒模型容器子元素)

设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。)

语法

flex-shrink: <number> (default 1)

#flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
#flex li{width:200px;}
#flex li:nth-child(1){background:#888;}
#flex li:nth-child(2){background:#ccc;}
#flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
<ul id="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

flex-shrink示例:

返回CSS3弹性盒模型的完整教程