flex-shrink

语法：

flex-shrink：<number>

默认值：1

适用于：flex子项

继承性：无

动画性：是

计算值：指定值

取值：

<number>：
用数值来定义收缩比率。不允许负值

说明：

设置或检索弹性盒的收缩比率。
  • 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
  • 示例：a,b,c将按照1:1:3的比率来收缩空间

    HTML Code：

    <ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:400px;margin:0;padding:0;list-style:none;} .flex li{width:200px;} .flex li:nth-child(3){flex-shrink:3;}

    flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

    本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3

    我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化

    通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；
    于是我们可以计算a,b,c将被移除的溢出量是多少：
    a被移除溢出量：(200*1/1000)*200，即约等于40px
    b被移除溢出量：(200*1/1000)*200，即约等于40px
    c被移除溢出量：(200*3/1000)*200，即约等于120px
    最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

  • 对应的脚本特性为flexGrow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-10.0 2.0-21.0 4.0-20.0 6.0 15.0+-webkit- 6.0-6.1 2.1-4.3 18.0-19.0
11.0+ 22.0+ 21.0+-webkit- 6.1+-webkit- 17.0+ 7.0+-webkit- 4.4+ 20.0+-webkit-
29.0+ 9.0+ 9.0+ 28.0+

示例：

本页最后更新时间：

2015.7.29