?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
語(yǔ)法：
flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默認(rèn)值：看各分拆屬性
適用于：flex子項(xiàng)
繼承性：無(wú)
動(dòng)畫(huà)性：否
計(jì)算值：看各分拆屬性
取值：
none：none關(guān)鍵字的計(jì)算值為: 0 0 auto
<' flex-grow '>：用來(lái)指定擴(kuò)展比率，即剩余空間是正值時(shí)此「flex子項(xiàng)」相對(duì)于「flex容器」里其他「flex子項(xiàng)」能分配到空間比例。
在「flex」屬性中該值如果被省略則默認(rèn)為「1」
<' flex-shrink '>：用來(lái)指定收縮比率，即剩余空間是負(fù)值時(shí)此「flex子項(xiàng)」相對(duì)于「flex容器」里其他「flex子項(xiàng)」能收縮的空間比例。
在收縮的時(shí)候收縮比率會(huì)以伸縮基準(zhǔn)值加權(quán)
在「flex」屬性中該值如果被省略則默認(rèn)為「1」
<' flex-basis '>：用來(lái)指定伸縮基準(zhǔn)值，即在根據(jù)伸縮比率計(jì)算出剩余空間的分布之前，「flex子項(xiàng)」長(zhǎng)度的起始數(shù)值。
在「flex」屬性中該值如果被省略則默認(rèn)為「0%」
在「flex」屬性中該值如果被指定為「auto」，則伸縮基準(zhǔn)值的計(jì)算值是自身的 <' width '> 設(shè)置，如果自身的寬度沒(méi)有定義，則長(zhǎng)度取決于內(nèi)容。
說(shuō)明：
如果縮寫(xiě)「flex: 1」, 則其計(jì)算值為「1 1 0%」
如果縮寫(xiě)「flex: auto」, 則其計(jì)算值為「1 1 auto」
如果「flex: none」, 則其計(jì)算值為「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 則其計(jì)算值為「0 1 auto」，即「flex」初始值
示例：如下情況每個(gè)元素的計(jì)算寬是多少
Code：
<ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:800px;margin:0;padding:0;list-style:none;} .flex :nth-child(1){flex:1 1 300px;} .flex :nth-child(2){flex:2 2 200px;} .flex :nth-child(3){flex:3 3 400px;}
本例定義了父容器寬（即主軸寬）為800px，由于子元素設(shè)置了伸縮基準(zhǔn)值flex-basis，相加300+200+400=900，那么子元素將會(huì)溢出900-800=100px；
由于同時(shí)設(shè)置了收縮因子，所以加權(quán)綜合可得300*1+200*2+400*3=1900px；
于是我們可以計(jì)算a,b,c將被移除的溢出量是多少：
a被移除溢出量：(300*1/1900)*100，即約等于16px
b被移除溢出量：(200*2/1900)*100，即約等于21px
c被移除溢出量：(400*3/1900)*100，即約等于63px
最后a,b,c的實(shí)際寬度分別為：300-16=284px, 200-21=179px, 400-63=337pxa
b
c
仍然是上面這個(gè)例子，不過(guò)將容器的寬度改成了1500px
Code：
<ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:1500px;margin:0;padding:0;list-style:none;} .flex :nth-child(1){flex:1 1 300px;} .flex :nth-child(2){flex:2 2 200px;} .flex :nth-child(3){flex:3 3 400px;}
本例定義了父容器寬（即主軸寬）為1500px，由于子元素設(shè)置了伸縮基準(zhǔn)值flex-basis，相加300+200+400=900，那么容器將有1500-900=600px的剩余寬度；
于是我們可以計(jì)算a,b,c將被擴(kuò)展量是多少：
a的擴(kuò)展量：(1/(1+2+3))*600，即約等于100px
b的擴(kuò)展量：(2/(1+2+3))*600，即約等于200px
c的擴(kuò)展量：(3/(1+2+3))*600，即約等于300px
最后a,b,c的實(shí)際寬度分別為：300+100=400px, 200+200=400px, 400+300=700px
從本例能看出：當(dāng)「flex-basis」在「flex」屬性中不為0時(shí)（包括值為auto，此時(shí)伸縮基準(zhǔn)值等于自身內(nèi)容寬度），「flex子項(xiàng)」將分配容器的剩余空間（剩余空間即等于容器寬度減去各項(xiàng)的伸縮基準(zhǔn)值）
當(dāng)「flex-basis」在「flex」屬性中等于0時(shí)，「flex子項(xiàng)」將分配容器的所有空間（因?yàn)楦黜?xiàng)的伸縮基準(zhǔn)值相加等于0，剩余空間等于容器寬度減去各項(xiàng)的伸縮基準(zhǔn)值，即減0，最后剩余空間值等于容器寬度），所以可以借助此特性，給各子項(xiàng)定義「flex: n」來(lái)進(jìn)行按比例均分容器總寬度
a
b
c
對(duì)應(yīng)的腳本特性為flex。
兼容性：
| 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+ |
示例：
實(shí)例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>align-content_CSS參考手冊(cè)_web前端開(kāi)發(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;}
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;margin:10px 0 0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{background:#aaa;text-align:center;}
.box li:nth-child(1){background:#999;}
.box li:nth-child(2){background:#aaa;}
.box li:nth-child(3){background:#ccc;}
#box li:nth-child(1){-webkit-flex:1;flex:1;}
#box li:nth-child(2){-webkit-flex:1;flex:1;}
#box li:nth-child(3){-webkit-flex:1;flex:1;}
#box2 li:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}
#box2 li:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}
#box2 li:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}
#box3 li:nth-child(1){-webkit-flex:1 1 400px;flex:1 1 400px;}
#box3 li:nth-child(2){-webkit-flex:1 2 400px;flex:1 2 400px;}
#box3 li:nth-child(3){-webkit-flex:1 2 400px;flex:1 2 400px;}
</style>
</head>
<body>
<h1>flex示例：</h1>
<ul id="box" class="box">
<li>flex:1;</li>
<li>flex:1;</li>
<li>flex:1;</li>
</ul>
<ul id="box2" class="box">
<li>flex:1 0 100px;</li>
<li>flex:2 0 100px;</li>
<li>flex:3 0 100px;</li>
</ul>
<ul id="box3" class="box">
<li>flex:1 1 400px;</li>
<li>flex:1 2 400px;</li>
<li>flex:1 2 400px;</li>
</ul>
</body>
</html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例