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