聲明：此文章內(nèi)含轉(zhuǎn)載內(nèi)容，點(diǎn)擊查看。如有侵權(quán)24小時(shí)內(nèi)刪除。聯(lián)系QQ：1522025433
語法：
flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默認(rèn)值：看各分拆屬性
適用于：flex子項(xiàng)
繼承性：無
動(dòng)畫性：否
計(jì)算值：看各分拆屬性
取值：
none：none關(guān)鍵字的計(jì)算值為: 0 0 auto
<' flex-grow '>：
用來指定擴(kuò)展比率，即剩余空間是正值時(shí)此「flex子項(xiàng)」相對(duì)于「flex容器」里其他「flex子項(xiàng)」能分配到空間比例。在「flex」屬性中該值如果被省略則默認(rèn)為「1」
<' flex-shrink '>：
用來指定收縮比率，即剩余空間是負(fù)值時(shí)此「flex子項(xiàng)」相對(duì)于「flex容器」里其他「flex子項(xiàng)」能收縮的空間比例。在收縮的時(shí)候收縮比率會(huì)以伸縮基準(zhǔn)值加權(quán)在「flex」屬性中該值如果被省略則默認(rèn)為「1」
<' flex-basis '>：
用來指定伸縮基準(zhǔn)值，即在根據(jù)伸縮比率計(jì)算出剩余空間的分布之前，「flex子項(xiàng)」長(zhǎng)度的起始數(shù)值。在「flex」屬性中該值如果被省略則默認(rèn)為「0%」在「flex」屬性中該值如果被指定為「auto」，則伸縮基準(zhǔn)值的計(jì)算值是自身的 <' width '> 設(shè)置，如果自身的寬度沒有定義，則長(zhǎng)度取決于內(nèi)容。
說明：
復(fù)合屬性。設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。
如果縮寫「flex: 1」, 則其計(jì)算值為「1 1 0%」
如果縮寫「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;}
重點(diǎn)內(nèi)容認(rèn)真看哦！
本例定義了父容器寬（即主軸寬）為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=337px
仍然是上面這個(gè)例子，不過將容器的寬度改成了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;}
重點(diǎn)內(nèi)容認(rèn)真看哦！
本例定義了父容器寬（即主軸寬）為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」來進(jìn)行按比例均分容器總寬度
對(duì)應(yīng)的腳本特性為flex。
示例：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>align-content_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title>
<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>
瀏覽器效果圖：
