目录

flex-shrink

flex-shrink 属性规定 flex 元素的收缩规则(弹性盒的收缩比率)。

 

语法

flex-shrink: <number>

描述
<number>默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

例子

HTML

<ul id="flex">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

CSS

#flex{
  display:-webkit-flex;
  display:flex;
  width:400px;
  margin:0;
  padding:0;
  list-style:none;}
#flex li{
  width:200px;
  text-align:center;
}
#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;
}

执行结果