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;
}

执行结果

  • a
  • b
  • c


跳至内容顶部