flex-grow、flex-shrink、flex-basis這三個屬性的作用是：在flex佈局中，父元素在不同寬度下，子元素是如何分配父元素的空間的。 其中，這三個屬性都是在子元素上設置的。 註：下麵講的父元素，指以flex佈局的元素(display:flex)。 flex-basis 該屬性來 ...
flex-grow、flex-shrink、flex-basis這三個屬性的作用是：在flex佈局中，父元素在不同寬度下，子元素是如何分配父元素的空間的。
其中，這三個屬性都是在子元素上設置的。
註：下麵講的父元素，指以flex佈局的元素(display:flex)。
flex-basis
該屬性來設置該元素的寬度。當然，width也可以用來設置元素寬度。如果元素上同時設置了width和flex-basis,那麼flex-basis會覆蓋width的值。
flex-grow
該屬性來設置，當父元素的寬度大於所有子元素的寬度的和時（即父元素會有剩餘空間），子元素如何分配父元素的剩餘空間。
flex-grow的預設值為0，意思是該元素不索取父元素的剩餘空間，如果值大於0，表示索取。值越大，索取的越厲害。
舉個例子:
父元素寬400px，有兩子元素：A和B。A寬為100px，B寬為200px。
則空餘空間為 400-（100+200）= 100px。
如果A，B都不索取剩餘空間，則有100px的空餘空間。
如果A索取剩餘空間:設置flex-grow為1，B不索取。則最終A的大小為 自身寬度（100px）+ 剩餘空間的寬度（100px）= 200px
如果A，B都設索取剩餘空間，A設置flex-grow為1，B設置flex-grow為2。則最終A的大小為 自身寬度（100px）+ A獲得的剩餘空間的寬度（100px * (1/(1+2))）,最終B的大小為 自身寬度（200px）+ B獲得的剩餘空間的寬度（100px * (2/(1+2))）
flex-shrink
該屬性來設置，當父元素的寬度小於所有子元素的寬度的和時（即子元素會超出父元素），子元素如何縮小自己的寬度的。
flex-shrink的預設值為1，當父元素的寬度小於所有子元素的寬度的和時，子元素的寬度會減小。值越大，減小的越厲害。如果值為0，表示不減小。
舉個例子:
父元素寬400px，有兩子元素：A和B。A寬為200px，B寬為300px。
則A，B總共超出父元素的寬度為(200+300)- 400 = 100px。
如果A，B都不減小寬度，即都設置flex-shrink為0，則會有100px的寬度超出父元素。
如果A不減小寬度:設置flex-shrink為0，B減小。則最終B的大小為 自身寬度(300px)- 總共超出父元素的寬度(100px)= 200px
如果A，B都減小寬度，A設置flex-shirk為3，B設置flex-shirk為2。則最終A的大小為 自身寬度(200px)- A減小的寬度(100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px,最終B的大小為 自身寬度(300px)- B減小的寬度(100px * (300px * 2/(200 * 3 + 300 * 2))) = 250px
