在我們上一篇CSS佈局文章中詳細的講解了grid佈局，這篇文章就帶大家來學習一下flex佈局！
全文思維導圖，建議收藏！
簡介
Flex佈局，也叫"彈性佈局"，用來為盒模型提供最大的靈活性。
任何一個容器都可以指定為 Flex 佈局。
.box{
display: flex;
}
對於行內元素也可以使用行內flex佈局
注意：這個點之前面試被面到過，可以留意一下
.box{
display: inline-flex;
}
使用時應該注意些什麼？
- 對於部分瀏覽器有相容性問題，需要做相容性處理。（IE：“你直接報我身份證算了”）
- 在父級元素設定為flex佈局後，子元素的float、clear、vertical-align屬性都將失效，所以在使用flex佈局時，應當在分析頁面結構時就考慮清楚，不應該先設定完子元素佈局後再使用。
基本概念
和grid佈局一樣，有容器和專案兩個概念，採用 Flex 佈局的元素，稱為 Flex 容器，簡稱為"容器"。它的所有子元素自動成為容器成員，稱為 Flex 專案，簡稱為"專案"。
注意：不同於grid佈局，flex佈局是一維佈局方式，按行或者按列
也就是父級元素採用flex佈局，則父級元素為容器，全部子元素自動成為專案。
在flex佈局中還有很多細緻的屬性，都一一在圖中有展示
- 水平的主軸（main axis）
- 垂直的交叉軸（cross axis）
- 主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end
- 交叉軸的開始位置叫做cross start，結束位置叫做cross end
- 單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size
容器屬性
容器屬性顧名思義就是設定在容器身上的屬性，一共有6個，下面來一一介紹
- 也就是這一部分的屬性全是設定在容器盒子身上的！
1. flex-direction
flex-direction屬性決定主軸的方向，也就是專案的排列方向
有四個屬性值row | row-reverse | column | column-reverse
測試程式碼
對三個專案分別設定了不同的顏色
<div class="container">
<div class="item item-1">flex item1</div>
<div class="item item-2">flex item2</div>
<div class="item item-3">flex item3</div>
</div>
row（預設值）：主軸為水平方向，起點在容器左端
row-reverse：主軸為水平方向，起點在容器右端
column：主軸為垂直方向，起點在容器上沿。
column-reverse：主軸為垂直方向，起點在容器下沿。
2. flex-wrap
flex-wrap屬性用於設定當專案在容器中一行無法顯示的時候如何處理。
有三個屬性值：nowrap | wrap | wrap-reverse
nowrap（預設）：不換行wrap：換行，第一行在上方wrap-reverse：換行，第一行在下方
3. flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
.container {
flex-flow: <flex-direction> || <flex-wrap>;
}
第一個屬性是方向，第二個是是否換行
4. justify-content
justify-content屬性定義專案在主軸上的對齊方式。
有5個屬性值：flex-start | flex-end | center | space-between | space-around
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
5. align-items
align-items屬性定義專案在交叉軸上如何對齊
有5個屬性值：flex-start | flex-end | center | baseline | stretch
flex-start：交叉軸的起點對齊flex-end：交叉軸的終點對齊center：交叉軸的中點對齊baseline: 專案的第一行文字的基線對齊stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
6. align-content
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用
有6個屬性值：flex-start | flex-end | center | space-between | space-around | stretch
flex-start：與交叉軸的起點對齊
flex-end：與交叉軸的終點對齊
center：與交叉軸的中點對齊，也就是垂直居中
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch（預設值）：軸線佔滿整個交叉軸
專案屬性
專案屬性就是寫在專案身上的！用來設定專案
1. order
order屬性定義專案的排列順序。數值越小，排列越靠前，預設值為0。
.item-2 {
order: 1;
background-color: plum;
}
item-2設定了order為1，比1，3的order值要大，所以item-2會排到後面
2. flex-grow
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
當其中的一個專案設定了flex-grow為1時，它將佔據剩餘空間的100%
.item-1 {
flex-grow: 1;
background-color: pink;
}
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
3. flex-shrink
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小，和flex-grow算是相對的屬性，一個放大一個縮小
如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，屬性為0的不縮小。
如果都是預設值1，則空間不足時，等比縮小
注意：負值對該屬性無效。
4. flex-basis
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（在基本概念中有介紹到）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。
- 它的預設值為
auto，即專案的本來大小。
簡單來說，當設定了flex-basis以後，就設定了專案的尺寸。
注意：width跟flex-basis的區別是，flex-basis的優先順序更高。如果設定的flex-basis的值不為auto，那麼width設定什麼值都無效，以flex-basis的值為準。只有當flex-basis的值為auto的時候，該專案才會是width設定的值。
注意：flex-basis和width為auto值，那最後的空間就是根據內容多少來定的，內容多佔據的水平空間就多
可以看出在item2分配剩餘空間之前，item1先佔據了300px
5. flex屬性（重點）
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
/*書寫順序*/
<'flex-grow'> <'flex-shrink'> <'flex-basis'>
對於flex屬性有幾個常用的屬性值auto，none，1
一下例項均對
item1進行操作
flex: auto
flex: auto 等同於 flex: 1 1 auto
flex: none
flex: none 等同於 flex: 0 0 auto
flex: 1
注意：當 flex 取值為一個非負數字，則該數字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%
也就是說flex: 1是flex: 1 1 0%的簡寫
flex: 100px
當flex取值為一個長度或者是一個百分比時，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1
flex: 100px等同於flex: 1 1 100px
注意：由於flex-grow: 1所以item1會佔滿剩餘空間
這部分是面試中常常會提及的內容，面試官：“你知道flex1嗎？”
6. align-self
align-self屬性設定單個專案的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
給容器設定了下端對齊，再給item1單獨設定居中對齊
以上就是關於flex佈局的全部內容了，相信看到這裡的你一定有所收穫，可以自己動手嘗試一下啦！思維導圖一定要收好噢！
