flex布局分為容器的設置和容器內成員的設置，容器的設置是管理成員的排列方式，也就是管理排列的方向和對齊的位置。成員的設置則是關於成員的大小和顯示的位置（order）。
彈性布局，彈性布局，自然要提現他的彈性，所謂彈性也就是對空間的分配。成員設置中的flex屬性，就是對於額外空間的管理。
flex可以設置三個值，第一個值必選，后兩個可選。
flex的第一個值
可以用flex-grow單獨設置，代表含義是對額外空間的占據量，所謂額外空間就是這一行多余的空間，有多余的空間這一屬性才有用。默認值是0，意思就是即使有多余空間，它也不要。
舉個列子
這就是默認的效果，如果給其中的一個設置任意一個正值，那它會把所有額外空間占掉；如果給多個成員設置正值，那么他們會根據正值的大小分配，比如值一個為1，一個為2，那么額外空間就會分成三份，給1的一份，給2的兩份。
首先將二號設為1，如圖
如果將二號設為1，三號設為2，如圖
有人會把flex-grow的值理解為總長度，這是個誤解，它實質是對額外空間的分配。
flex的第二個值
可以用flex-shrink單獨設置，這個屬性只有在沒有額外空間時起作用，意思是沒有額外空間時，成員貢獻出空間的大小。默認值為1，如果為0意思是不貢獻空間，也就是說即使空間不足，成員大小也不發生改變。
首先默認情況，改變容器的大小
然后，如果設置為0。
如果給二號設置為2， 已知默認值為1
可以看出二號釋放出的空間是一和三的兩倍，所以這里的值並不是縮小的比例，而是釋放空間的份額。默認都為1，那也就是說大家釋放同等的空間去填補容器的縮小量。
flex的第三個值
可以用flex-basis來設置，這個值呢，表示在分配額外空間之前，成員占據的空間，默認值為auto，意思就是你本來占多少就是多少。但也可以自己設置長度(px)。這個值的效果就是確定在釋放和分配空間的時候，你的初值是多少。
比如三個成員原本長度一樣的，我給二號設置flex-basis，如圖
總結
flex屬性其實就是flex-grow，flex-shrink，flex-basis三者的縮寫形式。要么只寫第一個，要么三個全寫，防止自己搞錯（確實有flex：0 auto 這種寫法，但最好還是避免吧）
一般還有幾個常用值
flex：auto； 等同於 flex：1 1 auto; 意思就是占滿額外空間，可縮放。
flex:none; 等同於flex：0 0 auto； 意思是不占額外空間，不可縮放。
從字面上解釋大概就是可彈性與不可彈性。