最近在研究css3的flex。遇到的flex:1;這一塊嗜闻，很是很糾結(jié)蜕依，flex-grow、flex-shrink、flex-basis始終搞不清样眠，最經(jīng)搜集了大量的介紹友瘤，應該能算是明白了。
網(wǎng)上大部分解釋是
flex-grow 是擴展比率
flex-shrink 是收縮比率
flex-basis 伸縮基準值
假設flex盒子父級寬度固定為800px檐束；
Flex-grow辫秧、Flex-shrink、Flex-basis 是Flex屬性的分寫模式厢塘；
如
<pre><code>
.box {
flex: 4 3 100px;
}
</code></pre>
等于
<pre><code>
.box {
flex-grow: 4;
flex-shrink: 3;
flex-basis: 100px;
}
</pre></code>
看以下例子
<pre><code>
.flex-parent {
width: 800px;
}
</pre></code>
第一種情況
flex-parent 是父級茶没，而且他的寬度是固定為800px，不會改變晚碾；
開始設置子級flex屬性抓半；
<pre><code>
.flex-son:nth-child(1){
flex: 3 1 200px;
}
.flex-son:nth-child(2){
flex: 2 2 300px;
}
.flex-son:nth-child(3){
flex: 1 3 500px;
}
</pre></code>
flex-basis總和加起來為1000px； 那么 1000px > 800px (父級的寬度)格嘁；子元素勢必要壓縮笛求；溢出了200px；
son1 = (flex-shrink) * flex-basis糕簿；
son2 = (flex-shrink) * flex-basis探入；
…..
sonN = (flex-shrink) * flex-basis；
如果flex-basis的總和加起來大于父級寬度懂诗，子級被壓縮蜂嗽，最后的選擇是flex-shrink來進行壓縮計算
加權(quán)值 = son1 + son2 + …. + sonN；
那么壓縮后的計算公式就是
壓縮后寬度 w = (子元素flex-basis值 * (flex-shrink)/加權(quán)值) * 溢出值
所以最后的加權(quán)值是
1200 + 2300 + 3*500 = 2300px
son1的擴展量：(200 * 1/ 2300) * 200殃恒，即約等于17px植旧；
son2的擴展量：(300 * 2/ 2300) * 200，即約等于52px离唐；
son3的擴展量：(500 * 3/ 2300) * 200病附，即約等于130px；
最后son1亥鬓、son2完沪、son3，的實際寬度為：
200 – 16 = 184px嵌戈；
300 – 52 = 248px覆积；
500 – 230 = 370px；
第二種情況
上面的例子已經(jīng)說明熟呛，繼續(xù)看第二個例子技健，同樣上面的例子，我們改下父級寬度為1200px;
flex-basis的總和為 1000px惰拱，小于父級寬度雌贱，將有200px的剩余寬度啊送；
既然有剩余，我們就不要加權(quán)計算欣孤，剩余的寬度將根據(jù)flex-grow馋没，值得總和進行百分比，那么200px就會根據(jù)份數(shù)比來分配剩余的空間降传；
剩余后寬度 w = (子元素flex-grow值 /所有子元素flex-grow的總和) * 剩余值
總分數(shù)為 total = 1 + 2 + 3篷朵；
son1的擴展量：(3/total) * 200，即約等于100px婆排；
son2的擴展量：(2/total) * 200声旺，即約等于67px；
son3的擴展量：(1/total) * 200段只，即約等于33px腮猖；
最后son1、son2赞枕、son3澈缺，的實際寬度為：
200 + 100 = 300px；
300 + 67 = 367px炕婶；
500 + 33 = 533px姐赡；
總結(jié)
所以以上兩種情況下，第二種flex-basis和flex-shrink是不列入計算公式的柠掂；第一種flex-grow是不列入計算公式的
ok项滑，上面的兩種情況總結(jié)完畢，但是很多時候我們的父級是不固定的涯贞，那么怎么辦枪狂，其實很簡單了，對照上面的公式肩狂，前提是已經(jīng)設置了flex-basis值得元素，如果寬度的隨機值小于flex-basis的時候就按第一種計算姥饰，反之第二種傻谁；明白了吧。
但是在實際中列粪，我們有些子元素不想進行比例分配审磁，永遠是固定的，那么flex就必須設置為none岂座；
否則設置的寬度（width）將無效态蒂；
flex: 1, 則其計算值為 flex: 1 1 0%；
flex: auto, 則其計算值為 flex: 1 1 auto费什；
flex: none, 則其計算值為 flex: 0 0 auto钾恢；
根據(jù)上面的公式
flex：1的時候第一種方式其實是無效的，因為加權(quán)值是0，所以只能是第二種方式計算瘩蚪；
flex：none的時候泉懦，兩種都失效，自己元素不參與父級剩余還是溢出的分配疹瘦，flex：none的應用場景還是很多的崩哩；
文檔參考http://css.doyoe.com/
