在Flex之前我們大部分都在使用文檔流，浮動(dòng)，定位，display inline-block，以及負(fù)margin來(lái)進(jìn)行布局，這樣做是可以的，但是確實(shí)會(huì)麻煩一些。
我們都知道塊級(jí)布局側(cè)重垂直方向，行內(nèi)布局側(cè)重水平方向，而flex布局是與方向無(wú)關(guān)的，因?yàn)榭梢允褂胒lex-direction這個(gè)屬性來(lái)改變方向。需要注意的是方向的改變，主軸的也會(huì)跟著改變。flex是flexible（靈活，彈性）的簡(jiǎn)寫，因此從字面意思可以理解flex是一個(gè)彈性的盒子，它是可以實(shí)現(xiàn)空間的自動(dòng)分配和自動(dòng)對(duì)齊。flex可以適用于簡(jiǎn)單的線性布局，大部分情況下可以滿足的我們的要求。
flex盒子
flex主要包括了flex container和flex item。
flex container的屬性包括：（主要介紹常用的屬性）
- flex-direction：方向
默認(rèn)row（行），從左到右排列，默認(rèn)是不換行的，元素變多就會(huì)擠在一行（這時(shí)候的寬度也會(huì)失效），row-reverse行反轉(zhuǎn)。
column元素從上往下排列，主軸的方向也就變成了垂直方向了。主軸主要是方向決定的。- flex-wrap：換行
默認(rèn)不換行。
wrap: 換行，空間不夠的時(shí)候自動(dòng)換行，而不是擠在一起。
wrap-reverse: 換行，元素反轉(zhuǎn)。- justify-content：主軸對(duì)齊方式
space-between: 空間分配到元素之間。
space-around：空間均勻的分配到元素的周圍。
flex-start：往起點(diǎn)靠。
center:放中間。- align-items：副軸對(duì)齊方式
stretch:默認(rèn)值，把所有的元素伸展開，高度和最高的元素一樣。只要stretch延伸，其它屬性不延伸。
flex-start：所有的元素往起點(diǎn)靠。不要延伸。
center: 往中間靠。
主軸對(duì)齊才有space-between,和space-around，副軸是沒(méi)有的。想要調(diào)整副軸的多行元素，使用屬性align-content。- align-content： 多行/列內(nèi)容對(duì)齊方式
默認(rèn)stretch:元素和空間占比均勻分配。
space-around:空間均勻分布到空間周圍。
flex-items的屬性包括：
- flex-grow：增長(zhǎng)比例（空間過(guò)多時(shí)）
空間有空余的時(shí)候，可以使元素占中間，只要一個(gè)元素?fù)碛衒lex-grow屬性，那么這個(gè)元素就占掉所有的多余空間。多個(gè)元素有flex-grow這個(gè)屬性，就按照數(shù)值的比例平均分配空間，值越大得到的空間就越大。- flex-shrink： 收縮比例（空間不夠時(shí)）
空間不夠的時(shí)候，按比例收縮，和上面類似。按比例收縮就是誰(shuí)縮小的更小，誰(shuí)縮小的更大的問(wèn)題。值越大收縮的越大。- flex-basis：默認(rèn)大小
不寫就是按照原來(lái)的大小。也可以設(shè)置占的空間大小。- order：順序
改變?cè)氐呐帕械捻樞颉?/li>- align-self：自身的對(duì)齊方式
使某一個(gè)元素獨(dú)立的往中間靠，那么就要使用align-self屬性了，這就是讓孩子自己選擇自己的對(duì)齊方式。主要有flex-end，flex-start，center。
