一、理解flex
二、理解Flex布局（又稱Flexbox布局）
Flex布局（又稱Flexbox布局）是一種基于Web的CSS3布局模式，其目的是為了更加靈活和自適應地布置各種各樣的網頁元素。Flex布局通過將一個父容器分割為一個或多個彈性項目，使得這些項目能夠按照一定規則相互排列，并且自動適應它們所處的容器環境。
在Flex布局中，父容器成為“flex container”，子元素成為“flex item”。Flex容器有兩個重要的屬性：flex-direction和justify-content。flex-direction主要用來決定flex item在主軸上的排列方向，而justify-content則用來對flex item進行主軸方向上的對齊。
除了這些基本屬性之外，Flex布局還具有許多其他的屬性，例如：align-items、align-content、flex-wrap、order、flex-grow、flex-shrink等。這些屬性用來定義flex item在交叉軸和主軸上的排序方式以及它們在父容器中所占的空間大小。
flex布局是一種比較高級的網頁排版技術，它能夠幫助開發者輕松地實現復雜的網頁布局效果，并且具有靈活和響應式的特點。
三、設置了 flex 布局后，以下屬性將失效
| 序號 | 屬性 | 備注 |
| 1 | float | |
| 2 | clear | |
| 3 | vertical-align | 在 Flex 容器中只能用于對齊 Flex 項目中的內聯元素或文字 |
| 4 | display:inline-block | |
| 5 | width | 可以在 Flex 項目上設置 |
| 6 | height | 可以在 Flex 項目上設置 |
| 7 | margin: auto | 在 Flex 容器上無法將 Flex 項目水平居中，需要使用justify-content:center實現 |
| 8 | flex-direction: row | 該屬性被設置為默認值flex-direction: row，如果需要更改主軸方向，應該使用flex-direction屬性 |
| 9 | flex-wrap: nowrap | 該屬性被設置為默認值flex-wrap:nowrap，如果需要實現換行或不換行，應該使用flex-wrap屬性 |
| 10 | justify-content: flex-start | 該屬性被設置為默認值，如果需要更改主軸方向上的對齊方式，應該使用justify-content屬性 |
| 注意：這并不是絕對的，還取決于具體的屬性值和 Flex 項目的結構。有些情況下上述屬性仍然可以正常使用 | ||
四、Flex布局有以下核心概念
4.1、Flex容器（Flex Container）：應用了 Flex 布局的元素，稱為 Flex 容器。其作用是定義 Flex 項目所在的容器，使 Flex 項目能夠進行彈性布局。
4.2、Flex項目（Flex Item）：Flex 容器中的子元素稱為 Flex 項目（Flex Item），每個 Flex 項目都具有彈性盒的屬性。同時，它們也受到 Flex 容器的限制，如放置的方向、排列順序等。
4.3、Flex軸（Main Axis）：Flex 容器主要的放置方向即為 Flex 軸。在該軸上，Flex 容器中的 Flex 項目會被依次排列。
4.4、Flex交叉軸（Cross Axis）：與 Flex 軸垂直的軸稱為 Flex 的交叉軸。在該軸上，Flex 項目所占據的空間是有限制的，具體大小由 Flex 容器的屬性決定。
4.5、主軸方向屬性（justify-content）：該屬性用于控制 Flex 項目在 Flex 軸上的對齊方式。它可以讓 Flex 項目在主軸方向上看起來更加美觀，通常被用于實現水平對齊或垂直對齊。
4.6、交叉軸方向屬性（align-items）：該屬性用于控制 Flex 項目在交叉軸上的對齊方式。它可以讓 Flex 項目在交叉軸方向上看起來更加美觀，通常被用于實現水平對齊或垂直對齊。
4.7、彈性元素屬性（flex）：該屬性用于控制 Flex 項目如何分配 Flex 容器中可用空間。該屬性的值決定了 Flex 項目的伸縮性，它能夠讓 Flex 項目在 Flex 容器中的尺寸發生變化，以適應不同的屏幕尺寸或者容器大小。
五、Flex容器
Flex容器是包含Flex項目的父級元素，通過設置該元素的display屬性為flex或inline-flex，即可創建一個Flex容器。
| 序號 | 屬性 | 屬性描述 | 值 | 值描述 |
| 1 | display | 指定容器為Flex布局 | flex | 主軸水平方向排列 |
| inline-flex | 主軸垂直方向排列 | |||
| 2 | flex-direction | 指定主軸的方向 | row | 從左到右 |
| row-reverse | 水平方向（從右到左） | |||
| column | 垂直方向（從上到下） | |||
| column-reverse | 垂直方向（從下到上） | |||
| 3 | justify-content | 指定主軸上的對齊方式 | flex-start | 靠近起點對齊 |
| flex-end | 靠近終點對齊 | |||
| center | 居中對齊 | |||
| space-between | 兩端對齊 | |||
| space-around | 間隔對齊 | |||
| 4 | align-items | 指定交叉軸上的對齊方式 | flex-start | 靠近起點對齊 |
| flex-end | 靠近終點對齊 | |||
| center | 居中對齊 | |||
| baseline | 基線對齊 | |||
| stretch | 拉伸對齊 | |||
| 5 | align-content | 指定多根軸線的對齊方式(僅當交叉軸為多根軸線時有效) | flex-start | 多行項目對齊于交叉軸的起始位置 |
| flex-end | 多行項目對齊于交叉軸的結束位置 | |||
| center | 多行項目在交叉軸上居中對齊 | |||
| space-between | 多行項目在交叉軸上平均分布，首尾項目對齊于容器兩端，項目之間的距離相等。 | |||
| space-around | 多行項目在交叉軸上平均分布，項目之間的距離相等，首尾項目距離容器兩端的距離是其他項目之間距離的一半 | |||
| stretch | 多行項目在交叉軸上拉伸以充滿容器的高度。 | |||
| 6 | flex-wrap | 指定元素是否換行 | nowrap | 不換行 |
| wrap | 換行 | |||
| wrap-reverse | 反向換行 | |||
| 7 | flex-flow | 用于同時設置 flex 容器的主軸和交叉軸的方向和排列方式，它是 flex-direction 和 flex-wrap 兩個屬性的縮寫 | row | 主軸為水平方向，起點在左端 |
| row-reverse | 主軸為水平方向，起點在右端 | |||
| column | 主軸為垂直方向，起點在上方 | |||
| column-reverse | 主軸為垂直方向，起點在下方 | |||
| wrap | 換行，第一行在上方 | |||
| wrap-reverse | 換行，第一行在下方 | |||
| nowrap | 不換行，所有元素排在一行上 | |||
| inherit | 從父元素繼承值 | |||
| 8 | align-self | 設置單個項目在交叉軸上的對齊方式 | auto | 默認值，元素繼承父元素在交叉軸方向上的對齊方式 |
| flex-start | 元素在交叉軸的起點對齊 | |||
| flex-end | 元素在交叉軸的終點對齊 | |||
| center | 元素在交叉軸的中心對齊 | |||
| baseline | 元素在交叉軸上以基線對齊 | |||
| stretch | 將元素在交叉軸上拉伸至撐滿整個交叉軸 |
六、Flex項目
Flex項目是Flex容器中的子元素，通過設置該元素的flex屬性，即可使其成為一個Flex項目。
| 序號 | 屬性 | 屬性描述 |
| 1 | justify-content | 控制項目在主軸上的對齊方式 |
| 2 | align-items | 控制項目在交叉軸上的對齊方式 |
| 3 | flex-direction | 控制主軸的方向 |
| 4 | flex-wrap | 控制項目在一行內排列不下時的換行方式 |
| 5 | align-content | 控制多行項目在交叉軸上的對齊方式 |
| 6 | flex-grow | 表示Flex項目在空間分配時的放大比例。 flex-grow的默認值為0，數值越大，空間分配越多。 |
| 7 | flex-shrink | 表示Flex項目在空間不足時的縮小比例。 flex-shrink的默認值為1，數值越大，縮小比例越多，設置為 0 不縮放 。 |
| 8 | flex-basis | 表示Flex項目在空間分配前的初始大小。 flex-basis的默認值為auto，可以設置具體數值或百分比。 |
| 9 | order | 表示Flex項目在容器中的排列順序。 order的默認值為0，數值越小，排列越靠前。可以使用負數值。 |
| 10 | flex | 是flex-grow, flex-shrink 和flex-basis的縮寫，可以一次性設置以上三個屬性 是flex-gflex的默認值為0 1 auto。 |
七、DEMO / vue3.3 +?ts
7.1、水平、垂直 居中
?
<template><div class="container"><!-- 水平、垂直 居中 --><div class="flex"><div class="flex_item"></div></div></div>
</template><script setup lang="ts">
</script><style scoped lang="less">
.container{.flex{display: flex;justify-content: center; // 水平居中align-items: center; // 垂直居中width: 200px;height: 200px;background: #ff0000;&_item{width: 50px;height: 50px;background: #b3de1b;}}
}
</style>
7.2、flex-shrink
<template><div class="container"><div class="flex"><div class="flex_item">1</div><div class="flex_item">2</div><div class="flex_item">3</div><div class="flex_item">4</div><div class="flex_item">5</div><div class="flex_item">6</div><div class="flex_item">7</div></div></div>
</template><script setup lang="ts">
</script><style scoped lang="less">
.container{.flex{display: flex;width: 200px;height: 200px;background: #ff0000;&_item{width: 50px;height: 50px;background: #b3de1b;flex-shrink: 0; // 表示Flex項目在空間不足時的縮小比例。flex-shrink的默認值為1，數值越大，縮小比例越多，設置為 0 不縮放 。}}
}
</style>
7.3、flex-wrap: wrap; / 換行
7.4、 align-content: flex-start; /?多行項目對齊于交叉軸的起始位置
?
八、過程記錄
8.1、display flex 和 inline-flex區別
| display | flex | inline-flex |
| 布局方向不同 | display:flex是主軸水平方向排列 | display:inline-flex是主軸垂直方向排列 |
| 元素占用空間不同 | display:flex元素會占據一行（即父元素寬度） | display:inline-flex元素只占據它所包含內容的空間 |
| 默認屬性不同 | display:flex默認屬性是flex-direction:row | display:inline-flex默認屬性是flex-direction:row-reverse |
| 元素排列方式不同 | display:flex元素默認排列方式為flex-start | display:inline-flex元素默認排列方式為baseline |
參考鏈接
Flex 布局語法教程 | 菜鳥教程
30 分鐘學會 Flex 布局 - 知乎
flex布局（詳解）_杰杰堅強的博客-CSDN博客
flex布局詳細教程
處理：end value has mixed support, consider using flex-end instead_星月I隨心的博客-CSDN博客
