對flex-grow和flex-shrink的深刻理解

flex彈性佈局，若是子元素寬度之和大於或者小於父元素寬度，空間就會存在剩餘和不夠，flex默認不換行，除非設置flex-wrap,那麼這種狀況下，有兩個重要的屬性，flex-grow和flex-shrink.

flex-grow默認值爲0，用於子元素的寬度之和小於父元素的寬度時分配剩餘空間，假如父元素寬度爲1000，三個子元素，div1寬度200，div2寬度300，div3寬度300；三個子元素都不設置flex-grow,那麼瀏覽器默認不自動分配剩餘空間，剩餘空間超出；假如給div1設置flex-grow:1,那麼剩餘1000-200-300-300=200px所有分配給div1；其餘的子元素div2和div3不參與分配,即不設置此屬性就不參與分配。

因此若是要參與分配，就要給子元素添加flex-grow屬性。若是按照1:1:1，那麼剩餘空間就分紅3等份，每一個子元素分1/3，也能夠設置2:2:2或者3:3:3,，可是結果和1:1:1是同樣的，都是平均分配，沒有意義。若是按照2:3:1，那麼剩餘空間分紅6等份，每一個子元素按照2/6，3/6,1/6去分配。

flex-shrink和flex-grow相反，默認值爲1，子元素寬度之和超出父元素寬度，那麼每一個子元素就要按比例縮小以適應父元素。這時候給子元素設置flex-grow不起做用。即便不給子元素設置flex-shrink,瀏覽器也會根據子元素在子元素寬度之和的佔有比例去縮小每一個子元素，假如

父元素寬度600，div1寬度200，div2寬度300，div3寬度300，超出父元素200+300+300-600=200，這200在默認狀況下瀏覽器會按比例給每一個子元素均分減小，默認比例怎麼算呢？先算出每一個div佔全部div寬度之和多少，上面三個div之和爲800，那麼三個div所佔比例爲：

div1:200/800=0.25

div2:300/800=0.375

div3:300/800=0.375

那麼超出的200就按照上面這個比例去分配，全部div1寬度要減小200*0.25=50,div2減小200*0.375=75，div3減小200*0.375=75；因此即便不給子元素添加flex-shrink,瀏覽器最後會把三個子元素寬度縮小到150,225,225；若是想自定義減少某個子元素寬度，就要給相應的div設置flex-shrink, 其餘不縮小的設置flex-shrink：0；