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； 意思是不佔額外空間，不可縮放。
從字面上解釋大概就是可彈性與不可彈性。
flex布局 容器內item屬性
1 order 1 flex布局內item元素沒有指定order屬性時，預設值都是0。2 flex布局內排列子item是根據每個子item的order值大小排列的，order值越小越靠前。2 flex grow 和android裡的weight屬性類似 1 所有子item的flex grow預設值都...
關於flex布局容器屬性
容器屬性 flex direction 決定主軸的方向 row 從下到上 row reverse 從上到下 column 從左到右 column reverse 從右到左 flex wrap 如果一行排列不下如何換行 nowrap 不換行 wrap 換行 wrap reverse 換行，第一行在下面...
Flex 布局 容器屬性
flex 布局，意為 彈性布局 任何乙個容器都可以指定為 flex 布局，行內元素也可以使用 flex 布局。注意 設為 flex 布局後，子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素，稱為 flex 容器，簡稱容器 它的所有子元素自...