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>