Bootstrap 5学习教程，从入门到精通，Bootstrap 5 Flex 布局语法知识点及案例（27）-EW帮帮网

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>

解析

.d-flex align-items-start：设置为 Flex 容器，并在交叉轴（垂直方向）上顶部对齐。
.align-self-center 和 .align-self-end：分别设置单个项目的交叉轴对齐方式。

六、总结

Bootstrap 5 提供了丰富的 Flexbox 工具类，使得布局设计更加简洁和高效。通过掌握这些工具类，可以轻松创建复杂且响应式的布局。以下是一些关键点：

容器设置：使用 .d-flex 或 .d-inline-flex 来启用 Flex 布局。
方向与换行：控制 Flex 方向和是否换行。
对齐与分布：使用 justify-content-* 和 align-items-* 类来控制对齐方式。
Flex 属性：控制子元素的伸缩行为。
间距控制：使用 Bootstrap 的间距工具类来管理元素之间的间距。

Bootstrap 5学习教程，从入门到精通，Bootstrap 5 Flex 布局语法知识点及案例（27）