Flex知識小結
flex 容器預設存在兩根軸
主軸（main axis）: 預設水平，可通過設定flex-direction改變主軸方向。
交叉軸（cross axis）： 預設垂直。
主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end； 交叉軸的開始位置叫做cross start，結束位置叫做cross end 專案預設沿主軸排列 單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。 複製程式碼
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） flex-direction: row
從左邊向右依次排開（截圖中紅色框指空白部分）。
2） flex-direction: row-reverse
從右邊向左依次排開。
3） flex-direction: column
從上邊向下依次排開。
4） flex-direction: column-reverse
從下邊向上依次排開。
2. flex-wrap
專案預設都排在主軸上，如果一行排不下，如何換行？可用flex-wrap屬性設定。
nowrap wrap wrap-reverse
1） flex-wrap: nowrap
每個專案依次排開不換行（每個專案寬度固定時，按照寬度依次放置，如果專案過寬一行放不下，且內部元素不會撐開容器時，會導致壓縮，如果內部元素撐開容器會出現滾動條，如果上個例子li的寬度改為600px，實際只有400++px ， 壓縮原因參考7.flex屬性 ）。
2） flex-wrap: 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） flex-wrap: 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） justify-content: flex-start
左對齊（預設）。
2） justify-content: flex-end
右對齊。
3） justify-content:center
居中。
4） justify-content: space-between
兩端對齊，專案之間的間隔都相等。專案與邊框無間距。
5） justify-content: space-around
每個專案兩側的間隔相等。專案之間的間隔比專案與邊框的間隔大一倍。
5. align-items
align-items屬性定義專案在交叉軸上如何對齊，即每一行專案高度不同時設定該屬性改變佈局。
flex-start flex-end center baseline stretch
1） align-items: flex-start
交叉軸的起點對齊（在本例中是上對齊）。
2） align-items:flex-end
交叉軸的終點對齊（在本例中是下對齊）。
3） align-items:center
交叉軸的中點對齊（居中）。
4） align-items:baseline
專案的第一行文字的基線對齊，本例給專案2增加padding-top，如下圖，文字1/2/3對齊。
5） align-items: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
下面所有示例把flex容器高度改為300px，結合上面說到的justify-content的示例，即可明白：
1） align-content：flex-start
與交叉軸的起點對齊。
2） align-content：flex-end
與交叉軸的終點對齊。
3） align-content：center
與交叉軸的中點對齊（面試垂直居中的一種方法）。
4） align-content：space-between
與交叉軸兩端對齊，軸線之間的間隔平均分佈。
5） align-content：space-around
每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
6） align-content：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 flex-grow flex-shrink
flex預定義值：
flex: initial=flex：0 1 auto flex: auto=flex:1 1 auto flex: none=flex: 0 0 auto flex: <positive-number> 複製程式碼
flex詳解： ofollow,noindex">www.w3.org/TR/2017/CR-…