?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
flex-shrink:<number>
默認(rèn)值:1
適用于:flex子項(xiàng)
繼承性:無(wú)
動(dòng)畫性:是
計(jì)算值:指定值
<number>:用數(shù)值來定義收縮比率。不允許負(fù)值
根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間。
示例: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的默認(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
a
b
c
對(duì)應(yīng)的腳本特性為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+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>flex-shrink_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> h1{font:bold 20px/1.5 georgia,simsun,sans-serif;} #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;} </style> </head> <body> <h1>flex-shrink示例:</h1> <ul id="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例