參考資料：https://www.bilibili.com/video/BV1N54y1i7dG?p=4
一、Flex佈局簡介
1. Flex佈局的主要作用
flex佈局是flexible佈局的縮寫，字面意思就是彈性佈局，它主要的作用是使用它可以非常方便地對html上的元素進行水平排布。
當flex佈局還沒有出現的時候，我們希望對網頁元素進行水平佈局往往是需要採用浮動（float）來實現的，但使用浮動會帶來許多意想不到的問題：例如元素脫離標準流而造成父盒子坍縮，後面排列的元素需要使用clear:both等方式消除浮動來避免前面浮動元素帶來的影響等等，此外浮動也沒有提供使水平排列的元素等分父盒子的功能，程式設計師手動編寫這樣的功能費時費力，使我們編寫頁面過程中出現了許多不必要的麻煩。
2. Flex佈局應用場景
和前面所說的一樣，Flex佈局就是為了開發人員能夠更簡單地進行元素的排版而生的，可以看到，很多大網站上水平排布元素的方式都由float實現改成了flex實現，因而學習flex佈局是有益且必要的。
b站的主頁：
jetbrains官網：
從這些大網站上可以看出flex佈局已經應用到了非常多的頁面之上，熟練掌握Flex佈局應該是當前前端開發人員的必備技能之一。
二、Flex佈局的使用
1. Flex佈局的兩種相關元素
Flex佈局中，有兩種相關的元素，一個是父元素（flex-container），即用於存放被放置元素的容器，例如上面b站和jetbrains官網上包圍住所有小專案的父級元素；二是子元素（flex-item），即希望被有條理放置的各個元素項（通常是水平排列），即上面b站的每個選項和jetbrains官網上的各個介紹卡片。
因為佈局的結果和父元素和子元素都相關，因此，我們需要分別對父元素和子元素分別進行設定才能得到想要的結果。
2. 父項屬性
| 屬性 | 作用 |
|---|---|
| flex- direction | 設定主軸的方向 |
| justify-content | 設定主軸上的子元素排列方式 |
| flex-wrap | 設定子元素是否換行 |
| align-content | 設定側軸上的子元素的排列方式(多行) |
| align-items | 設定側軸上的子元素排列方式(單行) |
| flex-flow | 複合屬性，相當於同時設定了flex-direction和flex-wrap |
2.1 flex- direction
在flex佈局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸
- 預設主軸方向就是x軸方向，水平向右
- 預設側軸方向就是y軸方向，水平向下
預設排列如下（從左到右）：
此時修改flex-direction屬性為：
.flex-container {
display: flex;
flex-direction: column; /*豎直排列*/
...
}
其作用是修改主軸為y軸，因此元素豎直排列，效果如下：
flex- direction的所有取值和效果：
| 屬性值 | 說明 |
|---|---|
| row | 從左到右（預設值） |
| column | 從上到下 |
| row-reverse | 從右到左 |
| column-reverse | 從下到上 |
2.2 justify-content
作用是設定主軸上的元素排列，具體效果如下：
| 常用屬性值 | 說明 | 效果 |
|---|---|---|
| flex-start | 從軸的頭部開始排列（預設值） |  |
| flex-end | 從軸的尾部開始排列 |  |
| center | 在主軸居中對齊 |  |
| space-around | 平分剩餘空間 |  |
| space-between | 先兩邊貼邊，再平分剩餘空間 |  |
| space-evenly | 距離相等 |  |
2.3 flex-wrap
可以發現，如果上面的元素如果再增加一個，綠色的容器的第一行就無法再裝下了，但事實是怎樣呢？
可以發現，加入這個元素之後，這個元素並沒有放置在下一行，而是擠在了第一行，此外所有元素的寬度都被壓縮了。
原因：預設情況下，item都排在一條線( 軸線) 上。flex-wrap屬性定義 , flex佈局中預設是不換行的（flex-wrap預設值為no-wrap）。
當排不下需要換行時，設定flex-wrap: wrap即可：
.flex-container {
flex-wrap: wrap;
...
}
2.4 align-items
作用：設定側軸上子元素的排列方式（單行）
| 屬性值 | 說明 | 效果 |
|---|---|---|
| flex-start | 從上到下（預設值） |  |
| flex-end | 從下到上 |  |
| center | 擠到一起居中（垂直居中） |  |
| stretch | 拉伸（子元素不能設定高度） |  |
2.5 align-content
和align-items的作用非常類似，都是用於設定側軸上子元素的排列方式，但align-content是用於設定多行子元素的排列（單行元素無效），並且還有側軸兩邊貼邊等的效果。
| 屬性值 | 說明 | 效果 |
|---|---|---|
| center | 多行元素居中 |  |
| space-around | 平分剩餘空間 |  |
| space-between | 先上下行貼邊，再平分剩餘空間 |  |
2.6 flex-flow
可以一次設定flex-direction和flex-wrap兩個屬性，如：
.flex-container {
flex-flow: wrap column;
}
3. 子項屬性
| 屬性名 | 作用 |
|---|---|
| flex | 子專案佔的份數 |
| align-self | 控制子項自己在側軸的排列方式 |
| order | 屬性定義子項的排列順序(前後順序) |
3.1 flex
flex屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
語法：
.item {
flex: <number>;
}
案例：模擬京東商城的搜尋欄，即左右兩個部分的寬度固定，而中間的寬度自適應。
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
.flex-container {
...
display: flex;
}
.flex-container > div:nth-child(1) {
width: 100px;
height: 100%;
background-color: plum;
}
.flex-container > div:nth-child(2) {
background-color: salmon;
flex: 1; /*這裡取了全部的剩餘空間*/
}
.flex-container > div:nth-child(3) {
width: 100px;
height: 100%;
background-color: #6ad281;
}
效果：
因為div1和div3分別佔用了100px的寬度，而div2使用flex佔據剩餘空間，因此div2就佔據了中間所有的空間。
此時改變頁面的寬度，可以發現中間部分會自適應變化，而兩邊寬度不變。可見，使用flex佈局非常容易就可以實現聖盃佈局的核心部分。
因為flex可以按比例分，因此我們可以擺脫使用百分比分配的困擾：
.flex-container > div:nth-child(1) {
flex: 1;
background-color: plum;
}
.flex-container > div:nth-child(2) {
flex: 1;
background-color: salmon;
}
.flex-container > div:nth-child(3) {
flex: 2;
background-color: #6ad281;
}
效果如下：
可以看到紫色和橙色各佔用一份空間，而綠色佔用了兩份的空間。
3.2 align-self
作用：改變單個元素在側軸上的排列。
初始效果：
新增：
.flex-container > div:last-child {
align-self: flex-end;
}
效果：
3.3 order
子元素的order值都預設是0，設定的order值越小，就排列在flex容器的越前面的位置。
初始：
修改：
.flex-container > div:nth-child(3) {
order: -1;
}
效果：
