flex 佈局下關於容器內成員 flex屬性的理解

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；  意思是不佔額外空間，不可縮放。

從字面上解釋大概就是可彈性與不可彈性。