簡介
flex佈局是一種彈性佈局，也可以把它理解為一種格式，使用了display:flex的div具有某種整體特質，就像word的格式刷，你刷了某種格式之後，相應的文件段落就具有了相同的特質：相同的字型樣式、相同的字型大小、相同的行間距、相同的。。。flex佈局也是這樣，使用了display:flex的div稱為flex容器，緊挨著該容器的子元素稱為專案，這些專案的排列方式具有整體特質：排列方向、換行方式、每行的排列方式。。。是用flex的7個屬性設定的。下圖的框框是flex容器：
flex 容器預設存在兩根軸，主軸和交叉軸，主軸是專案的排列方向，主軸確定之後，它90度的方向為交叉軸。預設情況，主軸是水平（row）的，也就是沿著水平方向排布的。當設定flex-direction:column時，主軸沿著垂直方向。當flex-direction含有reverse時，start和end交換位置。
Flex佈局一共有7個樣式屬性，設定在flex容器上，分別是：
flex-direction: row | row-reverse | column |column-reverse
flex-wrap: nowrap| wrap | wrap-reverse
flex-flow: row wrap| ...
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
align-content: flex-start | flex-end | center | space-between | space-around
複製程式碼1. flex-direction
決定主軸的方向（即專案的排列方向），專案沿著主軸依次排列。
預設為row（水平軸），設定為column則為垂直軸，當有reverse時，主軸起點和終點交換位置。
row（預設值）： 主軸為水平方向，起點在左端。row-reverse： 主軸為水平方向，起點在右端。column： 主軸為垂直方向，起點在上沿。column-reverse： 主軸為垂直方向，起點在下沿。
對於下面的例子：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul{
display: flex;
flex-direction: row;
}
ul>li{
width:100px;
height:50px;
background:#ffff00;
border:1px red solid;
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
複製程式碼1）row 預設
從左邊向右依次排開（截圖中紅色框指空白部分）。
2）row-reverse
從右邊向左依次排開。
3）column
從上邊向下依次排開。
4）column-reverse
從下邊向上依次排開。
2. flex-wrap
專案預設都排在主軸上，如果一行排不下，如何換行？可用flex-wrap屬性設定。
nowrap： 不換行wrap： 換行，第一行在上方wrap-reverse： 換行，第一行在下方
1）nowrap
每個專案依次排開不換行（每個專案寬度固定時，按照寬度依次放置，如果專案過寬一行放不下，且內部元素不會撐開容器時，會導致壓縮，如果內部元素撐開容器會出現滾動條，如果上個例子li的寬度改為600px，實際只有400++px ， 壓縮原因參考7.flex屬性 ）。
2）wrap
依次排開，一行不夠換行展示。
flex-wrap:wrap類似浮動float（當flex-direction為row-reverse時，類似float:right）。
與浮動有一點不同，flex佈局每一行高度都是一行所有專案中最高專案的高度，即每一行高度一致，就像給每一行巢狀一個div，這個div巢狀的專案個數取決於裝置，多麼厲害的佈局，這種佈局防止頁面錯亂。
而float每個專案高度不同，可能會導致頁面錯亂。根據float的定義，我們知道，它是浮在頁面上方，換行時可能不是從頁面最左側開始排列，這取決於上一行最右邊專案的高度和寬度等，而flex佈局換行都是從最左側排列。
下面用一個示例解釋這個問題，把第1個專案高度改為60px（其他都是50px）。
flex佈局示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul{
display: flex;
flex-direction: row;
}
ul>li{
width:100px;
height:50px;
background:#ffff00;
border:1px red solid;
display: inline-block;
}
ul>li:first-child{
height: 60px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
複製程式碼float佈局示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul>li{
float: left;
width:400px;
height:50px;
background:#ffff00;
border:1px red solid;
display: inline-block;
}
ul>li:first-child{
height: 60px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
複製程式碼跟float的區別在下面兩個圖中可以看出來，flex的專案4在1下方，而float的專案4貼在2的下面。如果把專案1高度改為20px，兩者沒有差別。
3）wrap-reverse
這個更厲害了，換行且第一行在最下面。我的理解是這樣，我們往地上一點點放盒子（這些盒子高度可能不同），一行放滿之後放一個擋板，在上面繼續放盒子，而flex-wrap:wrap是從上面放，一行放不下時，放個擋板，第二行繼續放。
3. flex-flow
flex-flow屬性就是flex-direction和flex-wrap的簡寫形式，預設值為row nowrap。不再多解釋。
.box {
flex-flow:row-reverse wrap;
}
複製程式碼4. justify-content
justify-content 定義了專案在主軸上的對齊方式，即每一行的排布方式，當每個專案寬度都不相同時設定專案間隔和整體位置。
flex-start（預設）： 左對齊flex-end： 右對齊center： 居中space-between： 兩端對齊，專案之間的間隔都相等。space-around： 每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
1）flex-start 預設
左對齊（預設）。
2）flex-end
右對齊。
3）center
居中。
4）space-between
兩端對齊，專案之間的間隔都相等。專案與邊框無間距。
5）space-around
每個專案兩側的間隔相等。專案之間的間隔比專案與邊框的間隔大一倍。
5. align-items
align-items屬性定義專案在交叉軸上如何對齊，即每一行專案高度不同時設定該屬性改變佈局。
flex-start： 交叉軸的起點對齊。flex-end： 交叉軸的終點對齊。center： 交叉軸的中點對齊。baseline: 專案的第一行文字的基線對齊。stretch（預設值）： 如果專案未設定高度或設為auto，將佔滿整個容器的高度。
1）flex-start
交叉軸的起點對齊（在本例中是上對齊）。
2）flex-end
交叉軸的終點對齊（在本例中是下對齊）。
3）center
交叉軸的中點對齊（居中,面試垂直居中的一種方法）。
4）baseline
專案的第一行文字的基線對齊，本例給專案2增加padding-top，如下圖，文字1/2/3對齊。
5）stretch 預設值
如果專案未設定高度或設為auto，將佔滿整個容器的高度，我們試圖把專案3設定height:auto，如下圖，它會撐滿整個高度，這個也十分有用。
6. align-content
定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。align-content類似justify-content，只不過justify-content定義主軸對齊方式，而align-content是定義交叉軸的對齊方式。
The align-items property will align the items on the cross axis.
複製程式碼flex-start： 與交叉軸的起點對齊。flex-end： 與交叉軸的終點對齊。center： 與交叉軸的中點對齊。space-between： 與交叉軸兩端對齊，軸線之間的間隔平均分佈。space-around： 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（預設值）： 軸線佔滿整個交叉軸。
下面所有示例把flex容器高度改為300px，結合上面說到的justify-content的示例，即可明白：
1）flex-start
與交叉軸的起點對齊。
2）flex-end
與交叉軸的終點對齊。
3）center
與交叉軸的中點對齊。
4）space-between
與交叉軸兩端對齊，軸線之間的間隔平均分佈。
5）space-around
每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
6）stretch 預設
軸線佔滿整個交叉軸。這個暫時沒想到好的例子說明。
7. flex
設定flex屬性，會根據屬性的比例進行劃分。
佈局空白 available space,這幾個 flex 屬性的作用其實就是改變了 flex 容器中的佈局空白的行為。
Where the flex-grow property deals with adding space in the main axis,
the flex-shrink property controls how it is taken away.
If we do not have enough space in the container to lay out our items and
flex-shrink is set to a positive integer the item can become smaller than the flex-basis.
複製程式碼包含三個屬性：flex-grow flex-shrink flex-basis
flwx-basis定義了該元素的佈局空白（available space）的基準值。flex-grow若被賦值為一個正整數， flex 元素會以 flex-basis 為基礎，沿主軸方向增長尺寸。flex-shrink若被賦值為一個正整數， flex 元素會以 flex-basis 為基礎，沿主軸方向jians尺寸。
flex預定義值：
flex: initial = flex：0 1 auto
flex: auto = flex:1 1 auto
flex: none = flex: 0 0 auto
flex: <positive-number>
複製程式碼flex詳解：www.w3.org/TR/2017/CR-…
其他
-
設為 Flex 佈局以後，子元素的 float、clear 和 vertical-align 屬性將失效。
-
主軸的方向不一定是水平的，這個屬性就是設定主軸的方向，主軸預設是水平方向，從左至右，如果主軸方向設定完畢，那麼交叉軸就不需要設定，交叉軸永遠是主軸順時針旋轉 90°。