Flex 布局（Flexible Box Layout，彈性盒子布局）是 CSS3 中的一種布局模式，用于在容器中更高效地分配空間并對齊內容，即使它們的大小是動態未知的。它非常適用于響應式設計。

---

一、Flex 布局的基本概念

1. 啟用 Flex 布局

• 只需要給父容器設置：

display: flex;

• 或者：

display: inline-flex;  /* 行內彈性盒子 */

2. 容器與項目

• 容器（Flex Container）：設置了 display: flex 的元素。
• 項目（Flex Item）：容器內的直接子元素。

---

二、主軸和交叉軸

• 主軸（Main Axis）：項目排列的方向，默認是水平方向（從左到右）。
• 交叉軸（Cross Axis）：與主軸垂直的方向。

---

三、Flex 容器的屬性（作用于父元素）

1. flex-direction：主軸方向

值	說明
row（默認）	主軸為水平方向，起點在左
row-reverse	主軸為水平方向，起點在右
column	主軸為垂直方向，起點在上
column-reverse	主軸為垂直方向，起點在下

2. flex-wrap：是否換行

值	說明
nowrap（默認）	不換行
wrap	換行，第一行在上方
wrap-reverse	換行，第一行在下方

3. flex-flow：flex-direction + flex-wrap 的簡寫

flex-flow: row wrap;

4. justify-content：主軸對齊方式

值	說明
flex-start（默認）	起始對齊
flex-end	末尾對齊
center	居中對齊
space-between	兩端對齊，項目之間間隔相等
space-around	每個項目兩側間隔相等
space-evenly	所有間隔都相等（包括頭尾）

5. align-items：交叉軸對齊方式

值	說明
stretch（默認）	填滿交叉軸
flex-start	頂部對齊
flex-end	底部對齊
center	居中對齊
baseline	按基線對齊

6. align-content：多行交叉軸對齊方式（有多行時生效）

值	說明
stretch（默認）	填滿交叉軸
flex-start	頂部對齊
flex-end	底部對齊
center	居中對齊
space-between	兩端對齊
space-around	間距相等
space-evenly	間距全部相等

---

四、Flex 項目的屬性（作用于子元素）

1. order：定義排列順序

.order { order: 1; }

值越小，越靠前，默認是 0。

2. flex-grow：放大比例

.flex-grow { flex-grow: 1; }

所有項目的 flex-grow 總和決定空間分配比例。

3. flex-shrink：縮小比例

.flex-shrink { flex-shrink: 1; }

為負空間時如何縮小，默認是 1。

4. flex-basis：項目在主軸上的初始大小

.flex-basis { flex-basis: 100px; }

5. flex：簡寫屬性，包含 grow、shrink、basis

flex: 1 0 100px;

通常寫法：

• flex: 1; 等價于 flex: 1 1 0%
• flex: auto; 等價于 flex: 1 1 auto
• flex: none; 等價于 flex: 0 0 auto

6. align-self：單獨設置某個項目在交叉軸上的對齊方式（覆蓋 align-items）

---

五、常見使用場景舉例

1. 水平居中 + 垂直居中

.parent {display: flex;justify-content: center;align-items: center;
}

2. 兩端對齊，中間自適應

.left { flex: 0 0 auto; }
.middle { flex: 1; }
.right { flex: 0 0 auto; }

---

總結

Flex 是一種強大且靈活的布局方式，核心在于：

• 設置主軸方向（flex-direction）
• 控制項目在主軸/交叉軸的對齊方式
• 利用 flex 屬性實現伸縮布局
• 響應式設計中的利器