Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。 她是一種現代的CSS布局方式，通過使用display: flex屬性來創建一個彈性容器，可以自動適配各種設備的不同寬度，而不必依賴于傳統的塊狀布局和浮動定位，并在其中使用靈活的盒子模型來進行元素的排列和定位。

1、什么是彈性布局

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。

她是一種現代的CSS布局方式，通過使用display: flex屬性來創建一個彈性容器，可以自動適配各種設備的不同寬度，而不必依賴于傳統的塊狀布局和浮動定位，并在其中使用靈活的盒子模型來進行元素的排列和定位。

在瀏覽器支持完美的環境中，選擇使用彈性盒子的原因是你希望把一系列項目沿著同一方向布局。因為在放置元素過程中，你想控制元素在那個方向的維度，或者控制它們彼此之間的間距。彈性盒子就是為此設計的。

2、彈性布局的特點

• 主軸與交叉軸：彈性容器具有主軸（main axis）和交叉軸（cross axis）。默認情況下，主軸是水平方向，交叉軸是垂直方向。

• 彈性容器：通過將父元素的display屬性設置為flex或inline-flex來創建彈性容器。

• 子元素的彈性項目：彈性容器中的每個子元素都成為彈性項目。子元素可以指定各自在主軸和交叉軸上的大小、順序以及對齊方式等。

• 主軸對齊：彈性項目可以在主軸上按照一定比例分配空間，也可以使用justify-content屬性定義主軸的對齊方式。

• 交叉軸對齊：彈性項目可以在交叉軸上進行對齊，包括頂部對齊、底部對齊、居中對齊等，使用align-items屬性定義交叉軸對齊方式。

• 換行與自動調整：可控制彈性項目是否換行，并且具備自動調整元素大小的能力。

• 彈性布局簡化了網頁布局的開發過程，提供了更靈活、響應式的布局方式。它適用于各種屏幕尺寸和設備類型，并能夠快速適應不同的布局需求。

3、Flex容器

我們把一個容器的 display 屬性值改為 flex 或者 inline-flex 之后，該容器就變成了 Flex 容器，而容器中的直系子元素就會變為 flex 元素。如下代碼所示，parent 元素就是 Flex 容器，son 元素就是 Flex 元素。

<style>
#parent {
    display: flex;
}
</style>
<div id="parent">
    <div id="son"></div>
</div>

由于所有 CSS 屬性都會有一個初始值，所以 flex 容器中的所有 flex 元素都會有下列行為：

• 元素排列為一行（flex-direction 屬性的初始值是 row）。
• 元素從主軸的起始線開始。
• 元素不會在主維度方向拉伸，但是可以縮小。
• 元素被拉伸來填充交叉軸大小。
• flex-basis 屬性為 auto。
• flex-wrap 屬性為 nowrap。

4、Flex容器屬性

4.1、flex-direction：決定主軸的方向（即項目的排列方向）

.box {
   flex-direction: row | row-reverse | column | column-reverse;
}

如果你選擇了 row 或者 row-reverse，那么主軸（Main Axis）就是橫向的 X 軸，交叉軸（Cross Axis）就是豎向的 Y 軸，如下圖所示。

如果你選擇了 column 或者 column-reverse，那么主軸（Main Axis）就變成是豎向的 Y 軸，交叉軸（Cross Axis）就是橫向的 X 軸，如下圖所示。

• row（默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，c起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。

4.2、flex-wrap：定義換行情況

• nowrap（默認）：不換行。
• wrap：換行，第一行在上方。
• wrap-reverse：換行，第一行在下方。

默認元素排列在一條軸線上，如果一條軸線排不下，此時就可以用flex-wrap屬性處理。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默認）：不換行

• wrap：換行，第一行在上方
  

• wrap-reverse：換行，第一行在下方

4.3、justify-content：定義項目在主軸上的對齊方式

justify-content 屬性用來使元素在主軸方向上對齊，它的初始值是 flex-start，即元素從容器的起始線排列。justify-content 屬性有如下 5 個不同的值：

• flex-start（默認值）：左對齊、從起始線開始排列，默認值。
• flex-end：右對齊、從終止線開始排列。
• center： 居中、在中間排列。
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

對齊方式與軸的方向有關，本文中假設主軸從左到右。

.box {
   justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}

• flex-start（默認值）：左對齊

• flex-end：右對齊

• center：居中

• space-between：兩端對齊，項目之間間隔相等

• space-around：每個項目兩側的間隔相等，即項目之間的間隔比項目與邊框的間隔大一倍

4.4、align-items：定義在交叉軸上的對齊方式

align-items 屬性可以使元素在交叉軸方向對齊，它的初始值是 stretch，即拉伸到最高元素的高度。align-items 屬性有如下 5 個不同的值：

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

對齊方式與交叉軸的方向有關，假設交叉軸從下到上。

.box{
    align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：起點對齊

• flex-end：終點對齊

• center：中點對齊

• baseline：項目的第一行文字的基線對齊

• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度

4.5、align-content：定義多根軸線的對齊方式

定義了多根軸線的對齊方式，如果項目只有一根軸線，那么該屬性將不起作用

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
• space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線占滿整個交叉軸。

如果項目只有一根軸線，該屬性不起作用。
所以，容器必須設置flex-wrap：···；

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：與交叉軸的起點對齊

• flex-end：與交叉軸的終點對齊

• center：與交叉軸的中點對齊

• space-between：與交叉軸的兩端對齊，軸線之間的間隔平均分布

• space-around：每根軸線兩側的間隔相等，即軸線之間的間隔比軸線與邊框的間隔大一倍

• stretch（默認值）：軸線占滿整個交叉軸。

當你不給項目設置高度但是給容器設置align-content不為stretch時，同一軸線上的項目的高度將等于項目中高度最高的項目。

4.6、align-content 和 align-items 區別

• align-items 適用于單行情況下，只有上對齊、下對齊、居中和 拉伸。
• align-content適應于換行(多行)的情況下(單行情況下無效)，可以設置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
• 總結就是單行找 align-items 多行找 align-content。

5、項目屬性（Item）

設置在項目上的屬性也有6個。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

5.1、order屬性：定義項目的排列順序

數值越小，排列越靠前，默認為0，可以是負值。

.item {
    order: <整數>;
}

5.2、flex-grow屬性

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

.item{
    flex-grow: <數字>;
}

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

5.3、flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

5.4、align-self屬性

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

看到這里，關于 Flex 布局的核心點就介紹得差不多了。掌握好這幾個核心的知識點，再去實踐練習基本上沒有什么太大的問題。剩下一些比較小眾的屬性，等用到時再去查查看就是了。

6、參考資料

彈性盒子-https://developer.mozilla.org/zh-CN/docs/Glossary/Flexbox

彈性盒布局-https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

FlexTest-https://flexbox.help/

Flex 布局教程：語法篇

Flexbox 布局的最簡單表單

【保姆級教程】Vue項目調試技巧

干貨|工作中要使用Git，看這篇文章就夠了

Vue 前端開發團隊風格指南（史上最全）

企業數字化轉型如何做？看過來

干貨-Vue3 組件通信方式詳解

【長文】帶你搞明白Redis