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)容。

• 如果縮寫(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=337px

• 仍然是上面這個(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)行按比例均分容器總寬度

• 對(duì)應(yīng)的腳本特性為flex。

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持