全面解析 CSS Flex 布局：從入門到精通的所有屬性詳解

1. Flex 容器屬性

通過 display: flex 或 display: inline-flex 將元素設置為 Flex 容器。以下是所有容器屬性。

1.1 `display: flex | inline-flex`

作用：定義一個 Flex 容器。
可選值：
- flex：塊級容器，占據整行。
- inline-flex：行內塊容器，寬度隨內容自適應。
示例：
```
.container {display: flex;
}
.inline-container {display: inline-flex;
}
```
效果：flex 使容器占滿整行，inline-flex 寬度隨內容變化。

1.2 `flex-direction`

作用：定義主軸方向。
可選值：
- row（默認）：水平從左到右。
- row-reverse：水平從右到左。
- column：垂直從上到下。
- column-reverse：垂直從下到上。

示例：

.container {display: flex;flex-direction: column;
}

效果：子項垂直排列，從上到下。

1.3 `flex-wrap`

作用：控制子項是否換行。
可選值：
- nowrap（默認）：單行排列，可能壓縮子項。
- wrap：多行排列，子項超出容器時換行。
- wrap-reverse：多行排列，行順序反轉。
示例：
```
.container {display: flex;flex-wrap: wrap;
}
```
效果：子項超出容器寬度時自動換行。

1.4 `flex-flow`

作用：flex-direction 和 flex-wrap 的簡寫。
語法：flex-flow: <flex-direction> <flex-wrap>;

示例：

.container {display: flex;flex-flow: row wrap;
}

效果：子項水平排列，支持換行。

1.5 `justify-content`

作用：控制主軸上子項的對齊方式。
可選值：
- flex-start（默認）：靠主軸起點。
- flex-end：靠主軸終點。
- center：居中對齊。
- space-between：兩端對齊，間距均分。
- space-around：子項周圍間距相等。
- space-evenly：間距完全均等。

示例：

.container {display: flex;justify-content: space-between;
}

效果：子項兩端對齊，剩余空間均分。

1.6 `align-items`

作用：控制交叉軸上子項的對齊方式（單行）。
可選值：
- stretch（默認）：子項拉伸填滿交叉軸。
- flex-start：靠交叉軸起點。
- flex-end：靠交叉軸終點。
- center：居中對齊。
- baseline：按文本基線對齊。

示例：

.container {display: flex;align-items: center;
}

效果：子項在交叉軸上居中。

1.7 `align-content`

作用：控制多行子項在交叉軸上的對齊方式（需 flex-wrap: wrap）。
可選值：
- stretch（默認）：行拉伸填滿交叉軸。
- flex-start：靠交叉軸起點。
- flex-end：靠交叉軸終點。
- center：居中對齊。
- space-between：兩端對齊，間距均分。
- space-around：行周圍間距相等。
- space-evenly：行間距完全均等。

示例：

.container {display: flex;flex-wrap: wrap;align-content: space-around;
}

效果：多行子項在交叉軸上均勻分布。

1.8 `gap`, `row-gap`, `column-gap`

作用：設置子項間距。
可選值：長度值（如 10px、1rem）。
說明：
- gap：同時設置行間距和列間距。
- row-gap：單獨設置行間距。
- column-gap：單獨設置列間距。
示例：
```
.container {display: flex;gap: 20px;
}
```
效果：子項間水平和垂直間距為 20px。

2. Flex 子項屬性

Flex 子項（容器的直接子元素）通過以下屬性控制自身行為。

2.1 `flex-grow`

作用：定義子項分配主軸剩余空間的比例。
可選值：非負整數（默認 0）。
說明：值越大，子項占用剩余空間越多。
示例：
```
.item1 {flex-grow: 1;
}
.item2 {flex-grow: 2;
}
```
效果：item2 占用剩余空間是 item1 的兩倍。

2.2 `flex-shrink`

作用：定義子項在主軸上壓縮的比例。
可選值：非負整數（默認 1）。
說明：值越大，空間不足時子項壓縮越多。
示例：
```
.item1 {flex-shrink: 0;
}
.item2 {flex-shrink: 2;
}
```
效果：空間不足時，item1 不壓縮，item2 壓縮更多。

2.3 `flex-basis`

作用：定義子項在主軸上的初始大小。
可選值：長度值（如 100px、20%）或 auto（默認）。
說明：優先級高于 width 或 height。
示例：
```
.item {flex-basis: 200px;
}
```
效果：子項初始寬度為 200px。

2.4 `flex`

作用：flex-grow、flex-shrink 和 flex-basis 的簡寫。
語法：flex: <flex-grow> <flex-shrink> <flex-basis>;
常用值：
- flex: 1：等同于 flex: 1 1 0%。
- flex: auto：等同于 flex: 1 1 auto。
- flex: none：等同于 flex: 0 0 auto。
示例：
```
.item {flex: 1 1 200px;
}
```
效果：子項初始寬度 200px，可伸縮。

2.5 `align-self`

作用：單獨控制子項在交叉軸上的對齊，覆蓋 align-items。
可選值：auto（默認，繼承 align-items）、flex-start、flex-end、center、baseline、stretch。
示例：
```
.item {align-self: flex-end;
}
```
效果：該子項靠交叉軸終點對齊。

2.6 `order`

作用：控制子項排列順序。
可選值：整數（默認 0）。
說明：值越小，子項越靠前。

示例：

.item1 {order: 2;
}
.item2 {order: 1;
}

效果：item2 排在 item1 之前。

3. 常見問題：`flex: 1` 導致無法固定寬度或高度

3.1 問題描述

使用 flex: 1（等同于 flex: 1 1 0%）時，子項會忽略顯式設置的 width 或 height，導致無法固定寬度或高度。這是因為：

flex: 1 設置了 flex-basis: 0%，使子項的初始主軸尺寸為 0，優先級高于 width 或 height。
flex-grow: 1 使子項盡可能占用剩余空間。
當主軸為水平方向（flex-direction: row），width 被忽略；當主軸為垂直方向（flex-direction: column），height 被忽略。

示例（問題重現）：

.container {display: flex;
}
.item {flex: 1;width: 200px; /* 被忽略 */height: 100px;
}

效果：子項寬度由剩余空間決定，width: 200px 無效。

3.2 解決方案

要固定寬度或高度，可以通過以下方式解決：

使用 flex-basis 明確指定初始尺寸：
```
.item {flex: 1 1 200px; /* flex-basis 設置為 200px */height: 100px;
}
```
效果：子項寬度固定為 200px，同時保持伸縮能力。
設置 flex: none 或 flex: 0 0 200px：
```
.item {flex: none; /* 等同于 flex: 0 0 auto */width: 200px;height: 100px;
}
```
效果：子項寬度固定為 200px，不伸縮。
使用 min-width 或 max-width 限制尺寸：
```
.item {flex: 1;min-width: 200px;max-width: 200px;height: 100px;
}
```
效果：子項寬度固定為 200px，防止被拉伸或壓縮。

在 flex-direction: column 中固定高度：

.container {display: flex;flex-direction: column;
}
.item {flex: 0 0 100px; /* 固定高度 */width: 200px;
}

效果：子項高度固定為 100px。

3.3 注意事項

優先級：flex-basis 優先級高于 width 或 height，但 min-width/max-width 和 min-height/max-height 優先級更高。
場景選擇：根據需求選擇 flex: none（完全固定）或 flex: 1 1 200px（固定初始尺寸但允許伸縮）。
調試技巧：使用瀏覽器的開發者工具檢查子項的計算尺寸，確認是否被 flex-basis 覆蓋。

4. 實戰示例：居中布局與響應式卡片

以下是一個綜合示例，展示如何使用 Flex 布局實現居中和響應式卡片，并解決 flex: 1 的尺寸問題。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Flex 布局示例</title><style>.container {display: flex;flex-flow: row wrap;justify-content: space-around;align-items: center;gap: 20px;min-height: 100vh;background: #f0f0f0;}.card {flex: 0 0 200px; /* 固定寬度 200px */background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-align: center;height: 100px; /* 固定高度 */}.card:nth-child(2) {align-self: flex-end;order: -1;}</style>
</head>
<body><div class="container"><div class="card">卡片 1</div><div class="card">卡片 2</div><div class="card">卡片 3</div></div>
</body>
</html>

效果說明：

使用 flex: 0 0 200px 確保卡片寬度固定為 200px，不會被拉伸或壓縮。
height: 100px 固定卡片高度。
flex-flow: row wrap 支持換行，justify-content: space-around 和 gap: 20px 確保間距均勻。
第二個卡片通過 align-self 和 order 調整位置和順序。

5. 常見問題與解決方案

為什么子項沒有拉伸？
- 檢查 align-items 是否為 stretch，且子項沒有固定高度。
為什么子項不換行？
- 確保 flex-wrap 設置為 wrap 或 wrap-reverse。
為什么 flex: 1 導致寬度/高度失效？
- 參考第 3 節，使用 flex-basis 或 min-width/max-width 固定尺寸。
如何實現完美居中？
- 使用 justify-content: center 和 align-items: center。

6. 總結

Flex 布局通過其強大的容器和子項屬性，為開發者提供了靈活的布局控制能力。特別需要注意的是，flex: 1 會導致 flex-basis: 0%，從而覆蓋顯式設置的 width 或 height。通過合理設置 flex-basis、min-width/max-width 或 flex: none，可以輕松解決尺寸固定問題。希望這篇教程能幫助你從入門到精通 Flex 布局，快速應用到實際項目中！

點個收藏，關注前端結城，一起用代碼點亮前端世界！🚀