摘要：前言春節(jié)假期有幸拜讀了張鑫旭大大的關(guān)于與的兩篇文章見參考文獻(xiàn)，很有收獲自己在開發(fā)的過程中，很多時(shí)候都會(huì)采用布局，而與這種方式已經(jīng)很少使用了這次在春假期間學(xué)習(xí)了，深感的好用與便利。相對(duì)于，它多出來一個(gè)的屬性，代表拉伸默認(rèn)屬性。

春節(jié)假期有幸拜讀了張鑫旭大大的關(guān)于Flex與Grid的兩篇文章（見參考文獻(xiàn)），很有收獲；自己在開發(fā)的過程中，很多時(shí)候都會(huì)采用Flex布局，而Float與inline-box這種方式已經(jīng)很少使用了；這次在春假期間學(xué)習(xí)了Grid，深感Grid的好用與便利。趁著這次機(jī)會(huì)總結(jié)一下Grid與Flex的使用。

Flex 瀏覽器支持情況

Grid瀏覽器支持情況

可以看出來，相對(duì)于Grid來說，F(xiàn)lex無論實(shí)在PC端還是移動(dòng)端都得到了很好的支持，而Grid，在移動(dòng)端的支持還是差強(qiáng)人意。

在flex布局中，有兩個(gè)概念需要謹(jǐn)記：容器與元素。在一個(gè)html標(biāo)簽中聲明樣式：display：flexordisplay：inline-flex即聲明了一個(gè)flex的容器，在這個(gè)容器里面的元素即為flex元素。而flex所有的樣式屬性分為兩類：容器屬性與元素屬性，他們均作用于flex元素，只不過flex容器中聲明的屬性統(tǒng)領(lǐng)flex所有元素整體顯示與排布方式，而flex元素的屬性表示單一元素的排布方式。

下面，根據(jù)上面腦圖的思路，依次介紹flex的屬性。
聲明：
下面師范的所有元素都遵從以下HTML結(jié)構(gòu) 和基本樣式

    
1
    
2
    
3
    
4
    ...

flex-direction顧名思義，是控制flex元素的整體布局方向的，它包括四個(gè)屬性：

1.row //從左到右 默認(rèn)
2.row-reverse //從右到左
3.column //從上到下
4.column-reverse //從下到上

1、flex-direction:row

2.flex-direction:row-reverse

3.flex-direction:column

4.flex-direction: column-reverse

上面四個(gè)圖是分別在容器上（.container）設(shè)置flex-direction四個(gè)屬性得到的效果。

flex-wrap是控制元素是換行顯示還是單行顯示，它共有三個(gè)屬性

1.no-wrap //不換行 默認(rèn)
2.wrap // 換行
3.wrap-reverse //換行反序

為了更加明顯的看出區(qū)別，我特別添加了一個(gè)難看的邊框。
在容器屬性上添加flex-wrap,分別設(shè)置三個(gè)wrap屬性
1.flex-wrap: no-wrap

2.flex-wrap: wrap

3.flex-wrap: wrap-reverse

在這里需要注意no-wrap屬性：
如果容器元素設(shè)置了最小寬度，而且元素的最小寬度之和>父容器的寬度，則顯示內(nèi)容溢出。
如果容器元素沒有設(shè)置最小寬度或者最小寬度之和<父容器的寬度，則容器元素收縮并將父元素填滿，在上面no-wrap例子中，就沒有設(shè)置子元素的最小寬度，讀者可以自行添加驗(yàn)證。

設(shè)置wrap-reverse屬性后，我們可以看到它的換行結(jié)果與wrap的換行結(jié)果在行這一維度上是相反的。

讀者可以試試將flex-direction設(shè)置為column或者其他非默認(rèn)值，再查看在不同的flex-wrap值下的顯示，會(huì)有不同的結(jié)果喲。

flex-flow是 flex-direction與flex-wrap的統(tǒng)寫，語法是
flex-flow:<‘flex-direction’> || <‘flex-wrap’>

justify-content控制flex元素水平方向的對(duì)齊方式，它共有 個(gè)屬性：

1.flex-start // 默認(rèn)值 默認(rèn)情況下左對(duì)齊
2.flex-end // 右對(duì)齊
3.center // 居中
下面以space開頭的屬性都是描述剩余空間的排布方式的
4.space-around //剩余空間圍繞在每個(gè)子元素的周圍
5.space-between //剩余空間只分布在子元素之間，兩端元素左右沒有剩余空間
6.space-evenly // 剩余空間均勻分布在元素兩端、之間

下面看例子：
1.flex-start

2.flex-end

3.center

4.space-between

5.space-around

6.space-evenly

為了更加明顯的看出不同space下的額外空間分布特點(diǎn)，我使用紅框框出每一屬性下的剩余元素。幾個(gè)屬性分布不同不言而喻了。

align-content與justify-content對(duì)應(yīng)，代表元素垂直方向上的分布。而這種分布方式只有在多行的情況下才能夠凸顯出來，單行情況下設(shè)置此屬性無效。
相對(duì)于justify-content，它多出來一個(gè)stretch的屬性，代表拉伸,默認(rèn)屬性。

1.stretch

2.flex-start

3.flex-end

4.space-between

5.space-around

6.space-evenly

可以看出，它的排布方式與justify-content的邏輯是一致的，只不過方向不同而已。

既然有了多行情況下控制元素排布方式，就會(huì)有單行情況下元素排布方式。align-items就是在單行情況下，控制元素排布方式的。共有5個(gè)屬性：
1.stretch 默認(rèn)屬性，會(huì)將元素的高度拉伸至父容器的高度

2.flex-start 頂部對(duì)齊

3.flex-end 底部對(duì)齊

4.baseline 基線對(duì)齊

5.center 居中

注意：以上所有的例子展示都是在其他屬性默認(rèn)情況的顯示情況，如果更改其他屬性(如：
flex-direction 與 flex-wrap)值，會(huì)有不同的顯示效果。

order屬性可以控制flex元素的排布順序，flex元素會(huì)根據(jù)order從小到大依次排布，order的默認(rèn)值為0，因此如果想要某個(gè)元素排在前面，只需要將他的order值設(shè)為比0小的值即可。

flex-grow控制元素所占寬度，默認(rèn)值為0，當(dāng)容器內(nèi)有剩余空間時(shí)，flex-grow不為0的元素將會(huì)按照以下規(guī)則擴(kuò)展：

容器中只有一個(gè)元素設(shè)置了flex-grow
1、flex-grow 值>=1 那么這個(gè)元素會(huì)填充容器的剩余空間

.container .item:first-child{
  order:2;
  flex-grow:1;
}

2、flex-grow 在0-1之間，那么這個(gè)元素會(huì)多占用空間為剩余空間乘以這個(gè)flex-grow的值。

.container .item:first-child{
  order:2;
  flex-grow:0.5;
}

.container{
  display:flex;
  justify-content:space-around;//如果子元素的flex-grow<1,此屬性依然有效
}

.container .item:first-child{
  order:2;
  flex-grow:0.5;
}

容器中有多個(gè)元素設(shè)置了flex-grow
1、所有元素的flex-grow的值之和>1
則占用全部的剩余空間，多占用的剩余空間比例即為各個(gè)元素所設(shè)置flex-grow的比例。
2、所有元素的flex-grow的值之和<1
所占用的剩余空間的比例即為各個(gè)元素的felx-grow的值的比例。

flex-shrink的屬性與flex-grow相反，指的是當(dāng)空間不足的時(shí)候，元素的收縮比例，默認(rèn)值為1；其核心思路與grow一致，這里不再贅述，讀者可以自行檢驗(yàn)。

flex-basis定義了在分配剩余空間之前，每個(gè)元素的默認(rèn)寬度，默認(rèn)為auto即元素的寬度；當(dāng)flex-basis的值不為auto時(shí)，其顯示的優(yōu)先級(jí)是高于元素的width的。

flex屬性為以上三個(gè)屬性的統(tǒng)稱，語法為：
flex: none | auto | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
flex翻譯為中文就是彈性的，所以這個(gè)屬性就是說明當(dāng)有空間過大or空間不足時(shí)，每個(gè)元素如何分布。

align-self顧名思義，就是確定單個(gè)元素垂直分布狀態(tài)；其在父容器對(duì)應(yīng)的屬性是algin-items；
其屬性值有align-items一致，只不過多了一個(gè)auto默認(rèn)屬性，表示與父元素的auto-items值一致。
來看例子：

對(duì)應(yīng)css代碼：

.container{
  display:flex;
  align-items:center;
}

.container .item:nth-child(2n+1){
  order:2;
  flex-grow:2;
  align-self:flex-start;
}

我在父元素上添加align-items屬性，使flex元素居中對(duì)齊，在子元素上添加align-self屬性，使奇數(shù)子元素向上對(duì)齊。

當(dāng)有多行的情況下，但是align-content未設(shè)置，我們可以看到，每一個(gè)設(shè)置了align-self屬性的子元素會(huì)在當(dāng)前的行按照align-self屬性顯示，但是當(dāng)align-content屬性設(shè)置后，其align-self屬性失效（見下圖）。

對(duì)應(yīng)代碼：

.container{
  display:flex;
  align-content:center;
  flex-wrap:wrap;
}

.container .item:nth-child(2n+1){
  order:2;
  flex-grow:2;
  align-self:flex-start;
}

flex布局就總結(jié)到這里，里面有些類似屬性沒有舉例子，還需要讀者自己去驗(yàn)證。相對(duì)于其他解決方案，flex布局更加簡潔，也更加具有語義性；最顯而易見的，可以很方便的解決我們平時(shí)面試過程中遇到的多欄布局，垂直居中問題。
其實(shí)細(xì)細(xì)品讀flex，相比于Grid而言，他還是更加線性化，就是把所有的元素都看成一條線，確定這條線的方向、居中垂直方式，當(dāng)這條線超過父元素的范圍，我們?cè)鯓犹幚?。所以，雖然flex看似有許多屬性，但是合理的理解后，還是非常簡單的。

這篇是glex與Grid的上篇，主要介紹了flex，而Grid的相關(guān)屬性與應(yīng)用，我們下篇見。

張鑫旭：寫給自己看的display: flex布局教程
阮一峰：Flex 布局教程