flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默認值：看各分拆屬性
適用于：flex子項
繼承性：無
動畫性：否
計算值：看各分拆屬性
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è)置了伸縮基準值flex-basis，相加300+200+400=900，那么子元素將會溢出900-800=100px；
由于同時設(shè)置了收縮因子，所以加權(quán)綜合可得300*1+200*2+400*3=1900px；
于是我們可以計算a,b,c將被移除的溢出量是多少：
a被移除溢出量：(300*1/1900)*100，即約等于16px
b被移除溢出量：(200*2/1900)*100，即約等于21px
c被移除溢出量：(400*3/1900)*100，即約等于63px
最后a,b,c的實際寬度分別為：300-16=284px, 200-21=179px, 400-63=337px
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;} 當「flex-basis」在「flex」屬性中不為0時（包括值為auto，此時伸縮基準值等于自身內(nèi)容寬度），「flex子項」將分配容器的剩余空間（剩余空間即等于容器寬度減去各項的伸縮基準值）
當「flex-basis」在「flex」屬性中等于0時，「flex子項」將分配容器的所有空間（因為各項的伸縮基準值相加等于0，剩余空間等于容器寬度減去各項的伸縮基準值，即減0，最后剩余空間值等于容器寬度），所以可以借助此特性，給各子項定義「flex: n」來進行按比例均分容器總寬度
| 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+ |