English 中文 العربية 日本語 Português

Bootstrap: Flexbox 工具类

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Bob 想做一个导航栏：logo 在左、导航链接居中、登录按钮在右——用传统布局需要 float 或 position，实现起来既繁琐又容易出错。

(4) 解法

Bootstrap 将 Flexbox 的常用属性封装成工具类，让你一句 CSS 都不用写就能实现弹性布局。用 Bootstrap 的 Flexbox 工具类只需 d-flex justify-content-between align-items-center。

理解方式： Flexbox 就像工人排列箱子——主轴决定方向（横排还是竖排），交叉轴决定对齐（居中/顶部/底部），justify-content 管水平分法，align-items 管垂直对齐。

(5) 收益

使用 Flexbox 工具类后，Bob 只用几个简洁的 class 就完成了导航栏布局——logo 左、链接居中、按钮右，代码清晰且易于维护。

2. 开启 Flex 容器

所有 Flex 工具类都基于 d-flex 或 d-inline-flex：

▶ 示例：弹性容器基础

HTML 
<div class="d-flex bg-light p-2">d-flex - block level flex container</div>
<span class="d-inline-flex bg-info p-2 text-white">d-inline-flex - inline flex</span>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 效果 CSS 等效
d-flex 块级 flex 容器 display: flex
d-inline-flex 行内 flex 容器 display: inline-flex

这两个 class 也支持响应式断点：d-sm-flex、d-md-flex 等。

3. 主轴方向

flex-row（默认）从左到右，flex-row-reverse 从右到左，flex-column 从上到下。

HTML 
<div class="d-flex flex-row bg-light p-2 mb-2">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

<div class="d-flex flex-column bg-light p-2">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 方向 场景
flex-row 水平（默认） 导航链接、按钮组
flex-row-reverse 水平反向 右侧菜单
flex-column 垂直 手机端竖排菜单
flex-column-reverse 垂直反向 评论区（最新在上）

4. 主轴对齐：justify-content

HTML 
<div class="d-flex justify-content-start bg-light p-2 mb-2">
  <div class="p-2 bg-primary text-white">Start</div>
  <div class="p-2 bg-primary text-white">Start</div>
</div>
<div class="d-flex justify-content-center bg-light p-2 mb-2">
  <div class="p-2 bg-success text-white">Center</div>
  <div class="p-2 bg-success text-white">Center</div>
</div>
<div class="d-flex justify-content-end bg-light p-2 mb-2">
  <div class="p-2 bg-danger text-white">End</div>
  <div class="p-2 bg-danger text-white">End</div>
</div>
<div class="d-flex justify-content-between bg-light p-2 mb-2">
  <div class="p-2 bg-info text-white">Between</div>
  <div class="p-2 bg-info text-white">Between</div>
</div>
<div class="d-flex justify-content-around bg-light p-2">
  <div class="p-2 bg-warning">Around</div>
  <div class="p-2 bg-warning">Around</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

100% 
graph LR
    subgraph justify-content options
        A1[start] --> A2[center]
        A2 --> A3[end]
        A3 --> A4[between]
        A4 --> A5[around]
    end

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 效果
justify-content-start 左对齐（默认）
justify-content-center 居中
justify-content-end 右对齐
justify-content-between 两端对齐，项目间距相等
justify-content-around 项目两侧间距相等
justify-content-evenly 所有间距完全相等

5. 交叉轴对齐：align-items

HTML 
<div class="d-flex align-items-start bg-light p-2 mb-2" style="height: 80px;">
  <div class="p-2 bg-primary text-white">Start</div>
  <div class="p-2 bg-primary text-white">Start</div>
</div>
<div class="d-flex align-items-center bg-light p-2 mb-2" style="height: 80px;">
  <div class="p-2 bg-success text-white">Center</div>
  <div class="p-2 bg-success text-white">Center</div>
</div>
<div class="d-flex align-items-end bg-light p-2" style="height: 80px;">
  <div class="p-2 bg-danger text-white">End</div>
  <div class="p-2 bg-danger text-white">End</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 效果 CSS 等效
align-items-start 顶部对齐 align-items: flex-start
align-items-center 垂直居中 align-items: center
align-items-end 底部对齐 align-items: flex-end
align-items-stretch 拉伸填满（默认） align-items: stretch

典型场景： align-items-center 是垂直居中最常用的方案——父容器设 d-flex + align-items-center，内容自动垂直居中。

6. 单个子项对齐：align-self

HTML 
<div class="d-flex bg-light p-2" style="height: 100px;">
  <div class="p-2 bg-primary text-white align-self-start">Start</div>
  <div class="p-2 bg-success text-white align-self-center">Center</div>
  <div class="p-2 bg-danger text-white align-self-end">End</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

7. 换行：flex-wrap

HTML 
<div class="d-flex flex-wrap bg-light p-2">
  <div class="p-3 m-1 bg-primary text-white">Item 1</div>
  <div class="p-3 m-1 bg-primary text-white">Item 2</div>
  <div class="p-3 m-1 bg-primary text-white">Item 3</div>
  <div class="p-3 m-1 bg-primary text-white">Item 4</div>
  <div class="p-3 m-1 bg-primary text-white">Item 5</div>
  <div class="p-3 m-1 bg-primary text-white">Item 6</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 行为
flex-nowrap 不换行，子项被压缩（默认）
flex-wrap 自动换行
flex-wrap-reverse 反向换行

8. 排序：order

HTML 
<div class="d-flex bg-light p-2">
  <div class="p-3 bg-danger text-white order-3">First in HTML (order-3)</div>
  <div class="p-3 bg-success text-white order-1">Second in HTML (order-1)</div>
  <div class="p-3 bg-primary text-white order-2">Third in HTML (order-2)</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 order-0 ~ order-5，数字越小越靠前。默认所有子项为 order-0。

9. 伸缩：flex-grow 与 flex-fill

HTML 
<div class="d-flex bg-light p-2">
  <div class="p-3 bg-danger text-white">Fixed</div>
  <div class="p-3 bg-success text-white flex-fill">flex-fill</div>
  <div class="p-3 bg-primary text-white flex-fill">flex-fill</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 效果 CSS
flex-fill 等分剩余空间 flex: 1 1 auto
flex-grow-0 不伸展（默认） flex-grow: 0
flex-grow-1 伸展填满 flex-grow: 1
flex-shrink-0 不压缩 flex-shrink: 0

10. Flex 工具类速查表

(1) Flex 属性快速参考

分类 class CSS 等效 说明
容器 d-flex display: flex 块级弹性容器
容器 d-inline-flex display: inline-flex 行内弹性容器
方向 flex-row flex-direction: row 水平排列（默认）
方向 flex-column flex-direction: column 垂直排列
方向 flex-row-reverse flex-direction: row-reverse 水平反向
方向 flex-column-reverse flex-direction: column-reverse 垂直反向
主轴 justify-content-* justify-content: * 主轴对齐方式
交叉轴 align-items-* align-items: * 交叉轴对齐方式
单个 align-self-* align-self: * 单个子项对齐
换行 flex-wrap flex-wrap: wrap 自动换行
换行 flex-nowrap flex-wrap: nowrap 不换行（默认）
排序 order-{0-5} order: {0-5} 调整显示顺序
伸缩 flex-fill flex: 1 1 auto 等分剩余空间
伸缩 flex-grow-1 flex-grow: 1 伸展填满
伸缩 flex-shrink-0 flex-shrink: 0 禁止压缩

(2) justify-content 值详解

class 效果 示意图 适用场景
justify-content-start 左对齐（默认） ████░░░░ 标准左对齐
justify-content-center 居中 ░░████░░ 居中布局
justify-content-end 右对齐 ░░░░████ 右侧操作栏
justify-content-between 两端对齐 █░░█░░██ 导航栏
justify-content-around 两侧间距相等 ░█░█░█░█░ 图标工具栏
justify-content-evenly 所有间距相等 ░█░░█░░█░ 均匀分布菜单

(3) align-items 值详解

class 效果 示意图 适用场景
align-items-start 顶部对齐 顶部对齐 顶部基线对齐
align-items-center 垂直居中 居中 垂直居中最常用
align-items-end 底部对齐 底部对齐 底部操作栏
align-items-stretch 拉伸填满 等高 等高卡片列
align-items-baseline 文字基线对齐 基线 不同字号文字

▶ 示例：导航栏

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="d-flex justify-content-between align-items-center bg-dark text-white p-3">
    <div class="fw-bold fs-5">MyLogo</div>
    <ul class="d-flex list-unstyled gap-4 mb-0">
      <li><a href="#" class="text-white text-decoration-none">首页</a></li>
      <li><a href="#" class="text-white text-decoration-none">产品</a></li>
      <li><a href="#" class="text-white text-decoration-none">关于</a></li>
      <li><a href="#" class="text-white text-decoration-none">联系</a></li>
    </ul>
    <button class="btn btn-light btn-sm">登录</button>
  </nav>
  <div class="container mt-4">
    <p>使用 <code>justify-content-between</code> 实现 logo 在左、导航居中、按钮在右。</p>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：卡片网格

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Flex 卡片网格</h3>
    <div class="d-flex flex-column flex-md-row gap-3">
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">卡片一</h5>
          <p class="card-text">flex-fill 使所有卡片等宽。</p>
          <a href="#" class="btn btn-primary">查看</a>
        </div>
      </div>
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">卡片二</h5>
          <p class="card-text">使用 gap-3 控制卡片间距。</p>
          <a href="#" class="btn btn-success">查看</a>
        </div>
      </div>
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">卡片三</h5>
          <p class="card-text">flex-column 手机竖排，flex-md-row 桌面横排。</p>
          <a href="#" class="btn btn-outline-primary">查看</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：居中登录表单

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Login</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="d-flex justify-content-center align-items-center bg-light" style="min-height: 100vh;">
    <div class="bg-white p-4 rounded shadow" style="width: 100%; max-width: 400px;">
      <h3 class="text-center mb-4">用户登录</h3>
      <form>
        <div class="mb-3">
          <label class="form-label">邮箱</label>
          <input type="email" class="form-control" placeholder="name@example.com">
        </div>
        <div class="mb-3">
          <label class="form-label">密码</label>
          <input type="password" class="form-control" placeholder="请输入密码">
        </div>
        <button type="submit" class="btn btn-primary w-100">登录</button>
      </form>
      <p class="text-center text-muted small mt-3 mb-0">
        没有账号？<a href="#">立即注册</a>
      </p>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：媒体对象

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Object</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Flex 媒体对象</h3>

    <div class="d-flex gap-3 mb-4">
      <div class="bg-primary text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
        A
      </div>
      <div>
        <h5 class="mb-1">Alice Wang</h5>
        <p class="mb-0 text-muted small">flex-shrink-0 确保头像不被压缩。使用 d-flex + gap-3 实现图文混排，这是 Bootstrap 媒体对象的推荐实现方式。</p>
      </div>
    </div>

    <div class="d-flex gap-3">
      <div class="bg-success text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
        B
      </div>
      <div>
        <h5 class="mb-1">Bob Chen</h5>
        <p class="mb-0 text-muted small">align-self-center 可以让头像相对于文字垂直居中，适合头像高度不等时使用。</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

❓ 常见问题

Q 为什么我用 d-flex 但子项没有在一行？
A Flexbox 默认 flex-direction: row 即水平排列。检查是否有其他 CSS 覆盖了 display 值，或者子项是块级元素设置了 width: 100%。
Q justify-content-between 和 justify-content-around 有什么区别？
A between 把第一个和最后一个子项贴在容器边缘，中间间距均分。around 在每个子项左右各分配等量空间，导致两端空隙是中间的一半。可在浏览器 DevTools 中修改 class 实时对比。
Q 垂直居中一定要用 Flexbox 吗？
A 对于已知高度的容器，也可以用 line-height 或 position + transform 实现。但 Flexbox 的 d-flex align-items-center 是最简洁、最通用的方式——不依赖容器高度，响应式不断点兼容性最好。
Q 什么时候用 Flexbox，什么时候用 Grid？
A Flexbox 适合一维布局（行或列），如导航栏、按钮组、媒体对象。Grid 适合二维布局（行和列同时），如页面主布局、卡片网格。简单规则：一行或一列用 Flexbox，行列同时控制用 Grid。两者可以嵌套使用。
Q align-content 和 align-items 有什么区别？
A align-items 控制单行内子项的对齐方式，align-content 控制多行整体在交叉轴上的分布。align-content 只在 flex-wrap: wrap 且有多行时生效。Bootstrap 提供了 align-content-* 系列工具类（如 align-content-center、align-content-between）。

📖 小节

📝 作业

  1. ⭐ 创建一个导航栏：左侧 logo、中间 4 个链接、右侧登录按钮，用 justify-content-between 和 align-items-center 实现。
  2. ⭐⭐ 创建一个三列卡片网格：手机端竖排（flex-column）、平板以上横排（flex-md-row），卡片之间 gap-3。
  3. ⭐⭐⭐ 做一个 Flexbox 交互动画页面：展示全部 6 种 justify-content 值的效果，每个值配文字说明和 3 个彩色方块。

上一课： 间距 · 下一课： 响应式设计

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏