Flexbox 网格系统实战：从基础到高级布局技巧
2026-05-28 ·
Bootstrap 5 的网格系统基于 Flexbox 构建，相比 Bootstrap 4 的 float 网格更加灵活强大。本文将带你从基础到高级，全面掌握 Flexbox 网格系统的使用方法。
1. 网格基础
Bootstrap 网格系统使用容器、行和列的层级结构进行布局。每个行被分为 12 列，通过不同的组合方式实现灵活的响应式布局。
<div class="container">
<div class="row">
<div class="col-md-8">左侧内容 (8列)</div>
<div class="col-md-4">右侧内容 (4列)</div>
</div>
</div>
.col-md-8 表示在 md（768px）及以上断点占 8 列，小于该断点会自动堆叠为 100% 宽度。
2. 等宽列与自动布局
使用 .col 类可以创建自动等分的列，无需指定具体的列数。所有列将平均分配可用宽度。
<div class="container">
<div class="row">
<div class="col">列 1</div>
<div class="col">列 2</div>
<div class="col">列 3</div>
</div>
</div>
也可以混合固定列和自适应列：
<div class="row">
<div class="col-auto">自适应宽度</div>
<div class="col">占满剩余空间</div>
</div>
3. 响应式断点
Bootstrap 5 提供 6 个断点，覆盖从手机到大屏显示器的所有设备：
| 断点 | 类前缀 | 最小宽度 | 设备 |
|---|
| Extra small | .col- | <576px | 手机竖屏 |
| Small | .col-sm- | 576px | 手机横屏 |
| Medium | .col-md- | 768px | 平板 |
| Large | .col-lg- | 992px | 小屏桌面 |
| Extra large | .col-xl- | 1200px | 大屏桌面 |
| XX large | .col-xxl- | 1400px | 超大屏 |
多个断点组合使用，可以实现精细的响应式控制：
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
手机端满宽 / 平板半宽 / 桌面 1/3 / 大屏 1/4
</div>
4. 水平对齐
使用行级别的 Flexbox 对齐类控制列在水平方向上的位置：
<div class="row justify-content-start">靠左</div>
<div class="row justify-content-center">居中</div>
<div class="row justify-content-end">靠右</div>
<div class="row justify-content-around">均匀分布</div>
<div class="row justify-content-between">两端对齐</div>
5. 垂直对齐
<div class="row align-items-start">顶部对齐</div>
<div class="row align-items-center">垂直居中</div>
<div class="row align-items-end">底部对齐</div>
列级别也可以单独设置垂直对齐：
<div class="col align-self-center">此列垂直居中</div>
6. 嵌套网格
在一个 .col 内部再次使用 .row 即可实现网格嵌套，每个嵌套层依然使用 12 列系统。
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-6">内层 6 列</div>
<div class="col-6">内层 6 列</div>
</div>
</div>
<div class="col-md-6">外层 6 列</div>
</div>
7. 列偏移
使用 .offset-* 类可以将列向右移动指定的列数：
<div class="row">
<div class="col-md-4">内容</div>
<div class="col-md-4 offset-md-4">右对齐内容</div>
</div>
8. 行列（Row Columns）
.row-cols-* 是一个非常实用的类，它可以快速将行内的列等分为指定的列数，无需为每个列单独设置宽度。这在卡片网格、产品列表等场景中尤其方便。
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<div class="col">卡片 1</div>
<div class="col">卡片 2</div>
<div class="col">卡片 3</div>
<div class="col">卡片 4</div>
<div class="col">卡片 5</div>
<div class="col">卡片 6</div>
<div class="col">卡片 7</div>
<div class="col">卡片 8</div>
</div>
上面的代码在手机上每行 1 列，平板（sm）每行 2 列，中屏（md）每行 3 列，大屏（lg）及以上每行 4 列。无需为每个 .col 单独指定 .col-* 类。
行列类结合不等宽列使用也很灵活：
<div class="row row-cols-md-3">
<div class="col">等分列 1</div>
<div class="col">等分列 2</div>
<div class="col-6">占据两倍的宽列</div>
</div>
9. 间距类（Gutter）
Bootstrap 5 使用 .g-*、.gx-*（水平间距）和 .gy-*（垂直间距）类来控制列之间的间距。相比 Bootstrap 4 的负 margin 方式，新的 gutter 系统更加直观。
| 类 | 间距大小 | 说明 |
|---|
.g-0 | 0 | 无间距 |
.g-1 | 0.25rem | 最小间距 |
.g-2 | 0.5rem | 小间距 |
.g-3 | 1rem | 默认间距 |
.g-4 | 1.5rem | 中等间距 |
.g-5 | 3rem | 大间距 |
<!-- 水平垂直间距均为 3（1rem） -->
<div class="row g-3">
<div class="col-md-4">内容</div>
<div class="col-md-4">内容</div>
<div class="col-md-4">内容</div>
</div>
<!-- 仅控制水平间距，垂直间距为 0 -->
<div class="row gx-4 gy-0">
<div class="col-md-6">内容</div>
<div class="col-md-6">内容</div>
</div>
.g-* 类应添加到 .row 上而非 .col 上，同时 .row 的负 margin 会自动抵消容器内边距，确保与你理解的视觉间距一致。
10. 实践技巧：常见布局模式
模式一：左侧固定 + 右侧自适应
<div class="row">
<div class="col-md-3">侧边栏（固定宽度）</div>
<div class="col-md-9">主内容区（自适应）</div>
</div>
模式二：内容居中（偏移法）
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
居中内容区域，桌面版不超过一半宽度</div>
</div>
模式三：等高列（默认行为）
<div class="row">
<div class="col-md-4 d-flex">
<div class="card p-3 w-100">等高卡片 1</div>
</div>
<div class="col-md-4 d-flex">
<div class="card p-3 w-100">等高卡片 2（内容更多）</div>
</div>
<div class="col-md-4 d-flex">
<div class="card p-3 w-100">等高卡片 3</div>
</div>
</div>
模式四：网格顺序反转（列排序）
<div class="row">
<div class="col-md-6 order-md-2">移动端上方，桌面端右侧</div>
<div class="col-md-6 order-md-1">移动端下方，桌面端左侧</div>
</div>
11. 响应式断点速查表
| 断点名称 |
类前缀 |
最小宽度 |
容器最大宽 |
适用场景 |
| xs | .col- | <576px | 100% | 旧手机竖屏 |
| sm | .col-sm- | 576px | 540px | 手机横屏、大屏手机 |
| md | .col-md- | 768px | 720px | 平板竖屏 |
| lg | .col-lg- | 992px | 960px | 平板横屏、小屏笔记本 |
| xl | .col-xl- | 1200px | 1140px | 桌面显示器 |
| xxl | .col-xxl- | 1400px | 1320px | 超大屏显示器 |
建议在设计时采用 Mobile First 策略：先定义手机端的布局（.col-12），然后逐级递增加大断点的覆盖。
经验法则：大多数项目只需要用到 sm、md、lg 三个断点即可覆盖 95% 的设备。不要过度设计多余的断点层级。
总结
掌握 Bootstrap 5 的 Flexbox 网格系统是构建响应式页面的基础。从简单的等分布局到复杂的嵌套结构，网格系统提供了足够的灵活性来应对各种设计需求。关键是理解断点的含义、熟悉对齐类，并在实际项目中多加练习。