Bootstrap 5學習教程，從入門到精通，Bootstrap 5 Flex 布局語法知識點及案例（27）

Bootstrap 5 Flex 布局語法知識點及案例

Bootstrap 5 提供了強大的 Flexbox 工具集，讓布局變得更加簡單靈活。以下是 Bootstrap 5 Flex 布局的完整知識點和詳細案例代碼。

一、Flex 布局基礎語法

1. 啟用 Flex 布局

<div class="d-flex">我是一個flex容器</div>
<div class="d-inline-flex">我是一個行內flex容器</div>

2. 方向控制 (flex-direction)

<div class="d-flex flex-row">水平排列（默認）</div>
<div class="d-flex flex-row-reverse">水平反向排列</div>
<div class="d-flex flex-column">垂直排列</div>
<div class="d-flex flex-column-reverse">垂直反向排列</div>

3. 主軸對齊 (justify-content)

<div class="d-flex justify-content-start">起始對齊（默認）</div>
<div class="d-flex justify-content-end">末端對齊</div>
<div class="d-flex justify-content-center">居中對齊</div>
<div class="d-flex justify-content-between">兩端對齊</div>
<div class="d-flex justify-content-around">均勻分布</div>
<div class="d-flex justify-content-evenly">完全均勻分布</div>

4. 交叉軸對齊 (align-items)

<div class="d-flex align-items-start">頂部對齊</div>
<div class="d-flex align-items-end">底部對齊</div>
<div class="d-flex align-items-center">垂直居中</div>
<div class="d-flex align-items-baseline">基線對齊</div>
<div class="d-flex align-items-stretch">拉伸填充（默認）</div>

5. 多行對齊 (align-content)

<div class="d-flex flex-wrap align-content-start">多行頂部對齊</div>
<div class="d-flex flex-wrap align-content-end">多行底部對齊</div>
<div class="d-flex flex-wrap align-content-center">多行居中</div>
<div class="d-flex flex-wrap align-content-between">多行兩端對齊</div>
<div class="d-flex flex-wrap align-content-around">多行均勻分布</div>
<div class="d-flex flex-wrap align-content-stretch">多行拉伸（默認）</div>

6. 子項對齊 (align-self)

<div class="d-flex"><div class="align-self-start">頂部對齊</div><div class="align-self-end">底部對齊</div><div class="align-self-center">垂直居中</div><div class="align-self-baseline">基線對齊</div><div class="align-self-stretch">拉伸填充</div>
</div>

7. 填充與間距 (flex-fill & gap)

<div class="d-flex"><div class="flex-fill">填充剩余空間</div><div class="flex-fill">填充剩余空間</div>
</div><div class="d-flex gap-1">小間距</div>
<div class="d-flex gap-2">中等間距</div>
<div class="d-flex gap-3">大間距</div>

8. 換行控制 (flex-wrap)

<div class="d-flex flex-nowrap">不換行（默認）</div>
<div class="d-flex flex-wrap">換行</div>
<div class="d-flex flex-wrap-reverse">反向換行</div>

9. 子項排序 (order)

<div class="d-flex"><div class="order-3">第一項</div><div class="order-1">第二項</div><div class="order-2">第三項</div>
</div>

10. 子項擴展 (flex-grow/shrink)

<div class="d-flex"><div class="flex-grow-1">擴展填充</div><div>固定寬度</div>
</div><div class="d-flex"><div class="flex-shrink-1">允許收縮</div><div class="w-100">寬元素</div>
</div>

二、響應式 Flex 布局

所有 Flex 類都可以添加響應式前綴：

.d-sm-flex
.flex-md-row
.justify-content-lg-center
.align-items-xl-start

斷點：sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px)

三、完整案例代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 5 Flex 布局案例</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>.box {height: 50px;background-color: #0d6efd;color: white;border: 1px solid white;display: flex;align-items: center;justify-content: center;}.box-alt {background-color: #6c757d;}.container-example {background-color: #f8f9fa;padding: 15px;margin-bottom: 20px;border-radius: 5px;}h2 {margin-top: 30px;margin-bottom: 15px;}</style>
</head>
<body><div class="container py-4"><h1 class="text-center mb-4">Bootstrap 5 Flex 布局案例</h1><!-- 1. 基本 Flex 容器 --><div class="container-example"><h2>1. 基本 Flex 容器</h2><div class="d-flex p-2 bg-light"><div class="box">Flex 容器</div><div class="box">子項 1</div><div class="box">子項 2</div></div><div class="d-inline-flex p-2 bg-light mt-2"><div class="box">行內 Flex 容器</div></div></div><!-- 2. 方向控制 --><div class="container-example"><h2>2. 方向控制</h2><div class="d-flex flex-row mb-2"><div class="box">flex-row (默認)</div><div class="box">子項 1</div><div class="box">子項 2</div></div><div class="d-flex flex-row-reverse mb-2"><div class="box">flex-row-reverse</div><div class="box">子項 1</div><div class="box">子項 2</div></div><div class="d-flex flex-column mb-2" style="height: 150px;"><div class="box">flex-column</div><div class="box">子項 1</div><div class="box">子項 2</div></div><div class="d-flex flex-column-reverse" style="height: 150px;"><div class="box">flex-column-reverse</div><div class="box">子項 1</div><div class="box">子項 2</div></div></div><!-- 3. 主軸對齊 --><div class="container-example"><h2>3. 主軸對齊 (justify-content)</h2><div class="d-flex justify-content-start mb-2"><div class="box">start (默認)</div><div class="box">子項</div></div><div class="d-flex justify-content-end mb-2"><div class="box">end</div><div class="box">子項</div></div><div class="d-flex justify-content-center mb-2"><div class="box">center</div><div class="box">子項</div></div><div class="d-flex justify-content-between mb-2"><div class="box">between</div><div class="box">子項</div><div class="box">子項</div></div><div class="d-flex justify-content-around mb-2"><div class="box">around</div><div class="box">子項</div><div class="box">子項</div></div><div class="d-flex justify-content-evenly"><div class="box">evenly</div><div class="box">子項</div><div class="box">子項</div></div></div><!-- 4. 交叉軸對齊 --><div class="container-example"><h2>4. 交叉軸對齊 (align-items)</h2><div class="d-flex align-items-start mb-2 bg-light" style="height: 100px;"><div class="box">align-items-start</div><div class="box">子項</div></div><div class="d-flex align-items-end mb-2 bg-light" style="height: 100px;"><div class="box">align-items-end</div><div class="box">子項</div></div><div class="d-flex align-items-center mb-2 bg-light" style="height: 100px;"><div class="box">align-items-center</div><div class="box">子項</div></div><div class="d-flex align-items-baseline mb-2 bg-light" style="height: 100px;"><div class="box" style="height: 60px;">align-items-baseline</div><div class="box">子項</div></div><div class="d-flex align-items-stretch bg-light" style="height: 100px;"><div class="box" style="height: auto;">align-items-stretch (默認)</div><div class="box" style="height: auto;">子項</div></div></div><!-- 5. 子項單獨對齊 --><div class="container-example"><h2>5. 子項單獨對齊 (align-self)</h2><div class="d-flex bg-light" style="height: 150px;"><div class="align-self-start box">align-self-start</div><div class="align-self-end box">align-self-end</div><div class="align-self-center box">align-self-center</div><div class="align-self-baseline box" style="height: 70px;">align-self-baseline</div><div class="align-self-stretch box" style="height: auto;">align-self-stretch</div></div></div><!-- 6. 填充與間距 --><div class="container-example"><h2>6. 填充與間距</h2><h5 class="mt-3">flex-fill</h5><div class="d-flex mb-3"><div class="flex-fill box">flex-fill</div><div class="flex-fill box">flex-fill</div><div class="flex-fill box">flex-fill</div></div><h5>間距 (gap)</h5><div class="d-flex gap-1 mb-2"><div class="box">gap-1</div><div class="box">子項</div><div class="box">子項</div></div><div class="d-flex gap-2 mb-2"><div class="box">gap-2</div><div class="box">子項</div><div class="box">子項</div></div><div class="d-flex gap-3"><div class="box">gap-3</div><div class="box">子項</div><div class="box">子項</div></div></div><!-- 7. 換行控制 --><div class="container-example"><h2>7. 換行控制 (flex-wrap)</h2><h5 class="mt-3">flex-nowrap (默認)</h5><div class="d-flex flex-nowrap mb-3" style="width: 300px; overflow: auto;"><div class="box" style="width: 150px;">flex-nowrap</div><div class="box" style="width: 150px;">子項</div><div class="box" style="width: 150px;">子項</div></div><h5>flex-wrap</h5><div class="d-flex flex-wrap mb-3" style="width: 300px;"><div class="box" style="width: 150px;">flex-wrap</div><div class="box" style="width: 150px;">子項</div><div class="box" style="width: 150px;">子項</div></div><h5>flex-wrap-reverse</h5><div class="d-flex flex-wrap-reverse" style="width: 300px;"><div class="box" style="width: 150px;">flex-wrap-reverse</div><div class="box" style="width: 150px;">子項</div><div class="box" style="width: 150px;">子項</div></div></div><!-- 8. 多行對齊 --><div class="container-example"><h2>8. 多行對齊 (align-content)</h2><div class="d-flex flex-wrap align-content-start mb-2 bg-light" style="height: 200px;"><div class="box" style="width: 100%; height: 40px;">align-content-start</div><div class="box" style="width: 30%;">子項</div><div class="box" style="width: 30%;">子項</div><div class="box" style="width: 30%;">子項</div></div><div class="d-flex flex-wrap align-content-between bg-light" style="height: 200px;"><div class="box" style="width: 100%; height: 40px;">align-content-between</div><div class="box" style="width: 30%;">子項</div><div class="box" style="width: 30%;">子項</div><div class="box" style="width: 30%;">子項</div></div></div><!-- 9. 響應式 Flex --><div class="container-example"><h2>9. 響應式 Flex</h2><div class="d-flex flex-column flex-md-row"><div class="box">小屏幕垂直</div><div class="box">中等屏幕水平</div></div></div></div><!-- Bootstrap 5 JS Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

四、Flex 布局案例代碼

以下是一個綜合性的示例，展示了如何使用 Bootstrap 5 的 Flex 工具類創建復雜的布局。每個部分都有詳細注釋，幫助理解每個類的用途。

示例：響應式導航欄與內容布局

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 5 Flex 布局示例</title><!-- 引入 Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>/* 自定義樣式，可根據需要調整 */.header {background-color: #0d6efd;color: white;padding: 1rem;}.sidebar {background-color: #f8f9fa;padding: 1rem;}.main-content {padding: 1rem;}.footer {background-color: #dee2e6;padding: 1rem;text-align: center;}</style>
</head>
<body><!-- 頭部導航欄 --><div class="header d-flex justify-content-between align-items-center"><div><h1 class="mb-0">網站標題</h1></div><div><nav class="navbar navbar-expand-md"><div class="container-fluid"><!-- 切換按鈕（移動設備） --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切換導航"><span class="navbar-toggler-icon"></span></button><!-- 導航鏈接 --><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav ms-auto"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">首頁</a></li><li class="nav-item"><a class="nav-link" href="#">關于</a></li><li class="nav-item"><a class="nav-link" href="#">服務</a></li><li class="nav-item"><a class="nav-link" href="#">聯系</a></li></ul></div></div></nav></div></div><!-- 主內容區域 --><div class="container-fluid"><div class="row"><!-- 側邊欄 --><nav class="col-md-3 col-lg-2 d-none d-md-block sidebar"><div class="position-sticky"><ul class="nav flex-column"><li class="nav-item"><a class="nav-link active" href="#">側邊欄1</a></li><li class="nav-item"><a class="nav-link" href="#">側邊欄2</a></li><li class="nav-item"><a class="nav-link" href="#">側邊欄3</a></li><li class="nav-item"><a class="nav-link" href="#">側邊欄4</a></li></ul></div></nav><!-- 主要內容 --><main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"><div class="d-flex flex-column"><h2>主要內容區域</h2><p>這是一個使用 Bootstrap 5 Flex 布局的示例。</p><div class="d-flex flex-wrap justify-content-between align-items-center"><div class="p-2 border border-1 border-secondary m-2">項目1</div><div class="p-2 border border-1 border-secondary m-2">項目2</div><div class="p-2 border border-1 border-secondary m-2">項目3</div><div class="p-2 border border-1 border-secondary m-2">項目4</div><div class="p-2 border border-1 border-secondary m-2">項目5</div></div><p>上述項目使用了 Flex 換行和間距工具類，實現了響應式布局。</p></div></main></div></div><!-- 頁腳 --><div class="footer"><p>? 2025 公司名稱. 版權所有.</p></div><!-- 引入 Bootstrap JS 和依賴的 Popper.js --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代碼解析

引入 Bootstrap CSS 和 JS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

通過 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，確保可以使用 Bootstrap 的所有功能。

頭部導航欄
```
<div class="header d-flex justify-content-between align-items-center">...
</div>
```
- .header：自定義類，用于設置頭部背景色和文字顏色。
- .d-flex：將容器設置為 Flex 容器。
- .justify-content-between：在主軸（水平方向）上兩端對齊。
- .align-items-center：在交叉軸（垂直方向）上居中對齊。
導航欄部分
```
<nav class="navbar navbar-expand-md">...
</nav>
```
使用 Bootstrap 的導航欄組件，實現響應式導航。
主內容區域
```
<div class="container-fluid"><div class="row">...</div>
</div>
```
- .container-fluid：創建一個全寬的容器。
- .row：創建一個行，用于包含列。
側邊欄
```
<nav class="col-md-3 col-lg-2 d-none d-md-block sidebar">...
</nav>
```
- .col-md-3 col-lg-2：在不同屏幕尺寸下設置側邊欄的寬度。
- .d-none d-md-block：在中等及以上屏幕尺寸下顯示側邊欄，其他情況下隱藏。
- .sidebar：自定義類，用于設置側邊欄的背景色和內邊距。
主要內容
```
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">...
</main>
```
- .col-md-9 ms-sm-auto col-lg-10：在不同屏幕尺寸下設置主內容區域的寬度。
- .px-md-4：在中等及以上屏幕尺寸下設置主內容區域的內邊距。
Flex 布局示例
```
<div class="d-flex flex-wrap justify-content-between align-items-center">...
</div>
```
- .d-flex：將容器設置為 Flex 容器。
- .flex-wrap：允許子元素換行。
- .justify-content-between：在主軸（水平方向）上兩端對齊。
- .align-items-center：在交叉軸（垂直方向）上居中對齊。
Flex 項目
```
<div class="p-2 border border-1 border-secondary m-2">項目1</div>
```
- .p-2：設置內邊距。
- .border border-1 border-secondary：添加邊框。
- .m-2：設置外邊距。
頁腳
```
<div class="footer">...
</div>
```
使用自定義類 .footer 設置頁腳的背景色和文字對齊。

五、Flex 布局的更多示例

示例 1：垂直居中內容

<div class="d-flex align-items-center justify-content-center" style="height: 200px; background-color: #e9ecef;"><div><h3>垂直居中內容</h3><p>使用 Flex 布局實現垂直和水平居中。</p></div>
</div>

解析

.d-flex：設置為 Flex 容器。
.align-items-center：在交叉軸（垂直方向）上居中對齊。
.justify-content-center：在主軸（水平方向）上居中對齊。
style="height: 200px; background-color: #e9ecef;"：設置容器高度和背景色。

示例 2：響應式 Flex 布局

<div class="d-flex flex-column flex-md-row justify-content-md-center align-items-md-center" style="height: 150px; background-color: #0dcaf0;"><div class="p-2">項目1</div><div class="p-2">項目2</div><div class="p-2">項目3</div>
</div>

解析

.d-flex flex-column flex-md-row：在中等及以上屏幕尺寸下使用水平方向排列，其他情況下使用垂直方向排列。
.justify-content-md-center：在中等及以上屏幕尺寸下在主軸（水平方向）上居中對齊。
.align-items-md-center：在中等及以上屏幕尺寸下在交叉軸（垂直方向）上居中對齊。
style="height: 150px; background-color: #0dcaf0;"：設置容器高度和背景色。

示例 3：Flex 項目對齊

<div class="d-flex align-items-start" style="height: 100px; background-color: #f0ad4e;"><div class="p-2">頂部對齊</div><div class="p-2 align-self-center">居中對齊</div><div class="p-2 align-self-end">底部對齊</div>
</div>