獲得 布局 超出 lex 自身 ofo targe 所有 www.

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

flex 自適應