flex-item屬性之flex-grow、flex-shrink瞭解下

前言

flex佈局，想必css江湖上的各位俠士都用得不少了，那咱們今天就來講說flex-item下的幾個不太經常使用的屬性吧（實際上是鄙人用的很少（┬＿┬）而已啦，好奇瞭解了下）。

從容貌上來看，grow，shrink，grow，shrink，哎呦，這不就是我一年下來減肥長胖減肥長胖的節奏麼？╭∩╮（￣▽￣）╭∩╮
從字面上的意思來看，就是對flex-item進行身材的改變，很符合flex自適應的概念嘛。那這兩個屬性究竟是有來嘛意思，有什麼用呢？下面就來了解下嘍。

---

參照物

flex-grow、flex-shrink、flex-basis三姐妹能夠被flex屬性直接囊括了，flex：flex-grow flex-shrink flex-basis, eg, flex: 0 1 auto;說好的只瞭解這兩個屬性的，爲何又來了個flex-basis?由於人身材變胖變瘦是要有對照物的嘛，須要和原裝元素進行對比才能夠。

flex-basis指item的content寬度，和屬性width有着相同的做用，不過二者有着不一樣的優先級。

• 若是flex-basis和width同時設置了數值，則以flex-basis爲準；
• 若是flex-basis設置爲auto且width設置了確切的寬度值，以width設置的寬度值爲準；
• 若是flex-basis設置爲auto且width沒有設置，則flex-basis以實際內容的寬度值爲準;

---

一塊兒變成張惠妹

好了，那咱們已經有了基本的對照參考值，即容器內item的初始值寬度。咱們看一下下面的這個例子:
父容器container寬度爲600px，兩個子元素的寬度分別爲300px、100px，那麼父容器在橫軸上並無被徹底填滿，可是就是想任性的不想其餘人看到元素背後的綠色怎麼辦~，這個時候咱們就用上了flex-grow，讓元素都本身變胖一點嘍。

http://jsfiddle.net/HqRunMan/...

分別對兩個子元素設置了flex-grow，要胖固然是你們一塊兒變胖啦。可是flex-grow不同，也就是說兩個元素的肥胖因子不太同樣， flex-grow越大，被分配餘下空間的寬度就越大。

remaining（剩餘分配空間）: 600px - 300px - 100px = 200px

一塊兒變胖的承受能力: 1 + 2 = 3

子元素灰灰須要接納的肉肉寬度: (200 * 1 / 3) px =  66.67px    
灰灰新的身體寬度= 300px + 66.67px = 366.67px;

子元素小橘須要接納的肉肉寬度: (200 * 2 /3) px = 133.33px   
小橘新的身體寬度= 100px + 133.33px = 233.33px;

---

瘦成閃電的誓言還在麼

讓咱們想象一下，子元素灰灰和小橘在幸福的生活中，越來愈胖，忽然有天他們回家發現這個家的大小再也容不下他們了。傷心欲絕的他們決定使出本身與生俱來的瘦身本領，拿起flex-shrink，一道金光閃過，終於這個家能夠容下他們了。

http://jsfiddle.net/HqRunMan/...

容器仍然是600px， 灰灰500px， 小橘300px， 須要一塊兒減掉200px才能夠。可是灰灰和小橘的瘦身能力明顯不同，他們設置了不一樣的flex-shrink，分別爲1和3。誰的瘦身能力強，誰就多瘦一點嘍。瘦掉的這200px須要平分到灰灰加上小橘身上的每個px上。

remaining 須要分配的空間：600px - 500px - 300px = -200px

全部px一塊兒變瘦的能力： 1 * 500 + 3 * 300 = 1400

子元素灰灰須要減掉的肉肉寬度 =（ -200 *  （1 * 500)/1400 ）px = -71.42px
瘦身後的灰灰寬度 = 500px -71.42px = 428.58px

子元素小橘須要減掉的肉肉寬度 =（ -200 *  （3 * 300)/1400 ）px = -128.57px
瘦身後的小橘寬度 = 300px - 128.57px = 171.42px

---

應用一下

講到這裏，不得不動手實現一個老生常談的題目了「實現一個兩列布局」，腦子裏飛速旋轉一下， BFC、負margin、絕對定位、浮動+calc，還有就是使用flex屬性啦，代碼check下:

http://jsfiddle.net/HqRunMan/...

左邊欄定寬，設置flex: 0 0 auto；關閉了flex-grow和flex-shrink功能，寬度不會隨着resize改變；
右側內容，設置flex：1 1 auto；隨着resize自適應寬度。

---

總結

1. flex-basis能夠當寬度來使用，可是要考慮好和width的優先級；
2. 自適應過程當中，flex-grow可使得未填滿的寬度被元素瓜分佔據；flex-shrink可使得容器空間不夠大的子元素瘦身。