前言

春節假期有幸拜讀了張鑫旭大大的關於Flex與Grid的兩篇文章（見參考文獻），很有收穫；自己在開發的過程中，很多時候都會採用Flex佈局，而Float與inline-box這種方式已經很少使用了；這次在春假期間學習了Grid，深感Grid的好用與便利。趁着這次機會總結一下Grid與Flex的使用。

瀏覽器支持

Flex 瀏覽器支持情況

Grid瀏覽器支持情況

可以看出來，相對於Grid來說，Flex無論實在PC端還是移動端都得到了很好的支持，而Grid，在移動端的支持還是差強人意。

FlexBox

在flex佈局中，有兩個概念需要謹記：容器與元素。在一個html標籤中聲明樣式：display：flexordisplay：inline-flex即聲明瞭一個flex的容器，在這個容器裏面的元素即爲flex元素。而flex所有的樣式屬性分爲兩類：容器屬性與元素屬性，他們均作用於flex元素，只不過flex容器中聲明的屬性統領flex所有元素整體顯示與排布方式，而flex元素的屬性表示單一元素的排布方式。

下面，根據上面腦圖的思路，依次介紹flex的屬性。
聲明：
下面師範的所有元素都遵從以下HTML結構和基本樣式

<style>
.container{
  height:200px;
  background-color:#999;
}
.container >.item{
  background-color:#456;
  width:80px;
  font-size:30px;
  color:white;
  text-align:center;
}
</style>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    ...
</div>

容器屬性

flex-direction

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

1.row //從左到右 默認
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

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

flex-wrap

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

1.no-wrap //不換行 默認
2.wrap // 換行
3.wrap-reverse //換行反序

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

2.flex-wrap: wrap

3.flex-wrap: wrap-reverse

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

設置wrap-reverse屬性後，我們可以看到它的換行結果與wrap的換行結果在行這一維度上是相反的。

讀者可以試試將flex-direction設置爲column或者其他非默認值，再查看在不同的flex-wrap值下的顯示，會有不同的結果喲。

flex-flow

flex-flow是 flex-direction與flex-wrap的統寫，語法是
flex-flow:<‘flex-direction’> || <‘flex-wrap’>

justify-content

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

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

下面看例子：
1.flex-start

2.flex-end

3.center

4.space-between

5.space-around

6.space-evenly

爲了更加明顯的看出不同space下的額外空間分佈特點，我使用紅框框出每一屬性下的剩餘元素。幾個屬性分佈不同不言而喻了。

align-content

align-content與justify-content對應，代表元素垂直方向上的分佈。而這種分佈方式只有在多行的情況下才能夠凸顯出來，單行情況下設置此屬性無效。
相對於justify-content，它多出來一個stretch的屬性，代表拉伸,默認屬性。

1.stretch

2.flex-start

3.flex-end

4.space-between

5.space-around

6.space-evenly

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

align-items

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

2.flex-start 頂部對齊

3.flex-end 底部對齊

4.baseline 基線對齊

5.center 居中

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

元素屬性

order

order屬性可以控制flex元素的排布順序，flex元素會根據order從小到大依次排布，order的默認值爲0，因此如果想要某個元素排在前面，只需要將他的order值設爲比0小的值即可。

flex-grow

flex-grow控制元素所佔寬度，默認值爲0，當容器內有剩餘空間時，flex-grow不爲0的元素將會按照以下規則擴展：

容器中只有一個元素設置了flex-grow
1、flex-grow 值>=1 那麼這個元素會填充容器的剩餘空間

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

2、flex-grow 在0-1之間，那麼這個元素會多佔用空間爲剩餘空間乘以這個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;
}

容器中有多個元素設置了flex-grow
1、所有元素的flex-grow的值之和>1
則佔用全部的剩餘空間，多佔用的剩餘空間比例即爲各個元素所設置flex-grow的比例。
2、所有元素的flex-grow的值之和<1
所佔用的剩餘空間的比例即爲各個元素的felx-grow的值的比例。

flex-shrink

flex-shrink的屬性與flex-grow相反，指的是當空間不足的時候，元素的收縮比例，默認值爲1；其核心思路與grow一致，這裏不再贅述，讀者可以自行檢驗。

flex-basis

flex-basis定義了在分配剩餘空間之前，每個元素的默認寬度，默認爲auto即元素的寬度；當flex-basis的值不爲auto時，其顯示的優先級是高於元素的width的。

flex

flex屬性爲以上三個屬性的統稱，語法爲：
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex翻譯爲中文就是彈性的，所以這個屬性就是說明當有空間過大or空間不足時，每個元素如何分佈。

align-self

align-self顧名思義，就是確定單個元素垂直分佈狀態；其在父容器對應的屬性是algin-items；
其屬性值有align-items一致，只不過多了一個auto默認屬性，表示與父元素的auto-items值一致。
來看例子：

對應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元素居中對齊，在子元素上添加align-self屬性，使奇數子元素向上對齊。

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

對應代碼：

.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佈局就總結到這裏，裏面有些類似屬性沒有舉例子，還需要讀者自己去驗證。相對於其他解決方案，flex佈局更加簡潔，也更加具有語義性；最顯而易見的，可以很方便的解決我們平時面試過程中遇到的多欄佈局，垂直居中問題。
其實細細品讀flex，相比於Grid而言，他還是更加線性化，就是把所有的元素都看成一條線，確定這條線的方向、居中垂直方式，當這條線超過父元素的範圍，我們怎樣處理。所以，雖然flex看似有許多屬性，但是合理的理解後，還是非常簡單的。

這篇是glex與Grid的上篇，主要介紹了flex，而Grid的相關屬性與應用，我們下篇見。

參考文獻

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

JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇）

前言