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；
?
