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的默認(rèn)值為1，如果沒有顯示定義該屬性，將會(huì)自動(dòng)按照默認(rèn)值1在所有因子相加之后計(jì)算比率來進(jìn)行空間收縮。
本例中c顯式的定義了flex-shrink，a,b沒有顯式定義，但將根據(jù)默認(rèn)值1來計(jì)算，可以看到總共將剩余空間分成了5份，其中a占1份，b占1份，c占3分，即1:1:3
我們可以看到父容器定義為400px，子項(xiàng)被定義為200px，相加之后即為600px，超出父容器200px。那么這么超出的200px需要被a,b,c消化
通過收縮因子，所以加權(quán)綜合可得200*1+200*1+200*3=1000px；
于是我們可以計(jì)算a,b,c將被移除的溢出量是多少：
a被移除溢出量：(200*1/1000)*200，即約等于40px
b被移除溢出量：(200*1/1000)*200，即約等于40px
c被移除溢出量：(200*3/1000)*200，即約等于120px
最后a,b,c的實(shí)際寬度分別為：200-40=160px, 200-40=160px, 200-120=80px
| 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+ |