Bootstrap 4 Flex布局 - 弹性盒子完全指南

最后编辑于2025-04-14 12:27:49.3158679 +0800 CST

Bootstrap 4 Flex布局系统

Bootstrap 4完全采用了Flexbox（弹性盒子）布局模型，这是现代Web开发中最强大的布局技术之一。通过Flex布局，我们可以轻松创建响应式、动态的布局，而无需使用浮动或定位。

Flex基础知识

在Bootstrap 4中使用Flex布局非常简单。只需要向容器添加.d-flex或.d-inline-flex类：

html 
 1<!-- 创建一个flex容器 -->
 2<div class="d-flex p-3 bg-secondary">
 3  <div class="p-2 bg-info">Flex项目1</div>
 4  <div class="p-2 bg-warning">Flex项目2</div>
 5  <div class="p-2 bg-primary">Flex项目3</div>
 6</div>
 7
 8<!-- 创建一个inline-flex容器 -->
 9<div class="d-inline-flex p-3 bg-secondary">
10  <div class="p-2 bg-info">Flex项目1</div>
11  <div class="p-2 bg-warning">Flex项目2</div>
12  <div class="p-2 bg-primary">Flex项目3</div>
13</div>

响应式Flex类

Bootstrap 4提供了响应式的Flex类，可以在不同的屏幕尺寸下启用Flex布局：

  • .d-flex - 在所有屏幕尺寸下都是flex容器
  • .d-sm-flex - 在小屏幕及以上是flex容器
  • .d-md-flex - 在中等屏幕及以上是flex容器
  • .d-lg-flex - 在大屏幕及以上是flex容器
  • .d-xl-flex - 仅在超大屏幕是flex容器

Flex方向

控制Flex容器的主轴方向：

html 
 1<div class="d-flex flex-row bg-secondary mb-3">
 2  <div class="p-2 bg-info">项目1</div>
 3  <div class="p-2 bg-warning">项目2</div>
 4  <div class="p-2 bg-primary">项目3</div>
 5</div>
 6
 7<div class="d-flex flex-row-reverse bg-secondary mb-3">
 8  <div class="p-2 bg-info">项目1</div>
 9  <div class="p-2 bg-warning">项目2</div>
10  <div class="p-2 bg-primary">项目3</div>
11</div>
12
13<div class="d-flex flex-column bg-secondary mb-3">
14  <div class="p-2 bg-info">项目1</div>
15  <div class="p-2 bg-warning">项目2</div>
16  <div class="p-2 bg-primary">项目3</div>
17</div>
18
19<div class="d-flex flex-column-reverse bg-secondary">
20  <div class="p-2 bg-info">项目1</div>
21  <div class="p-2 bg-warning">项目2</div>
22  <div class="p-2 bg-primary">项目3</div>
23</div>

内容对齐

控制Flex容器中项目在主轴上的对齐方式：

html 
 1<!-- 主轴对齐（水平） -->
 2<div class="d-flex justify-content-start bg-secondary mb-3">
 3  <div class="p-2 bg-info">Flex项目</div>
 4  <div class="p-2 bg-warning">Flex项目</div>
 5</div>
 6
 7<div class="d-flex justify-content-end bg-secondary mb-3">
 8  <div class="p-2 bg-info">Flex项目</div>
 9  <div class="p-2 bg-warning">Flex项目</div>
10</div>
11
12<div class="d-flex justify-content-center bg-secondary mb-3">
13  <div class="p-2 bg-info">Flex项目</div>
14  <div class="p-2 bg-warning">Flex项目</div>
15</div>
16
17<div class="d-flex justify-content-between bg-secondary mb-3">
18  <div class="p-2 bg-info">Flex项目</div>
19  <div class="p-2 bg-warning">Flex项目</div>
20</div>
21
22<div class="d-flex justify-content-around bg-secondary">
23  <div class="p-2 bg-info">Flex项目</div>
24  <div class="p-2 bg-warning">Flex项目</div>
25</div>

控制Flex容器中项目在交叉轴上的对齐方式：

html 
 1<!-- 交叉轴对齐（垂直） -->
 2<div class="d-flex align-items-start bg-secondary mb-3" style="height: 100px">
 3  <div class="p-2 bg-info">Flex项目</div>
 4  <div class="p-2 bg-warning">Flex项目</div>
 5</div>
 6
 7<div class="d-flex align-items-end bg-secondary mb-3" style="height: 100px">
 8  <div class="p-2 bg-info">Flex项目</div>
 9  <div class="p-2 bg-warning">Flex项目</div>
10</div>
11
12<div class="d-flex align-items-center bg-secondary mb-3" style="height: 100px">
13  <div class="p-2 bg-info">Flex项目</div>
14  <div class="p-2 bg-warning">Flex项目</div>
15</div>
16
17<div class="d-flex align-items-baseline bg-secondary mb-3" style="height: 100px">
18  <div class="p-2 bg-info">Flex项目</div>
19  <div class="p-2 bg-warning">Flex项目</div>
20</div>
21
22<div class="d-flex align-items-stretch bg-secondary" style="height: 100px">
23  <div class="p-2 bg-info">Flex项目</div>
24  <div class="p-2 bg-warning">Flex项目</div>
25</div>

Flex填充和换行

html 
 1<!-- flex-fill类 -->
 2<div class="d-flex bg-secondary mb-3">
 3  <div class="p-2 flex-fill bg-info">Flex项目 with flex-fill</div>
 4  <div class="p-2 flex-fill bg-warning">Flex项目 with flex-fill</div>
 5  <div class="p-2 flex-fill bg-primary">Flex项目 with flex-fill</div>
 6</div>
 7
 8<!-- 换行 -->
 9<div class="d-flex flex-wrap bg-secondary">
10  <div class="p-2 bg-info">Flex项目1</div>
11  <div class="p-2 bg-warning">Flex项目2</div>
12  <div class="p-2 bg-primary">Flex项目3</div>
13  <div class="p-2 bg-success">Flex项目4</div>
14  <div class="p-2 bg-danger">Flex项目5</div>
15  <div class="p-2 bg-dark text-white">Flex项目6</div>
16  <div class="p-2 bg-light">Flex项目7</div>
17  <div class="p-2 bg-info">Flex项目8</div>
18</div>

自身对齐

单个Flex项目可以使用align-self-*类覆盖容器的对齐设置：

html 
1<div class="d-flex bg-secondary" style="height: 150px">
2  <div class="p-2 bg-info">常规Flex项目</div>
3  <div class="p-2 bg-warning align-self-start">align-self-start</div>
4  <div class="p-2 bg-primary align-self-center">align-self-center</div>
5  <div class="p-2 bg-success align-self-end">align-self-end</div>
6  <div class="p-2 bg-danger align-self-baseline">align-self-baseline</div>
7  <div class="p-2 bg-dark text-white align-self-stretch">align-self-stretch</div>
8</div>

自动边距

使用自动边距类轻松分隔Flex项目：

html 
 1<!-- 推到右侧 -->
 2<div class="d-flex bg-secondary mb-3">
 3  <div class="p-2 bg-info">Flex项目</div>
 4  <div class="p-2 bg-warning">Flex项目</div>
 5  <div class="p-2 ml-auto bg-primary">推到右侧的Flex项目</div>
 6</div>
 7
 8<!-- 推到左侧 -->
 9<div class="d-flex bg-secondary mb-3">
10  <div class="p-2 mr-auto bg-info">推到左侧的Flex项目</div>
11  <div class="p-2 bg-warning">Flex项目</div>
12  <div class="p-2 bg-primary">Flex项目</div>
13</div>

实际应用示例

响应式导航栏

html 
1<nav class="d-flex flex-column flex-md-row justify-content-between bg-light p-3">
2  <a class="p-2" href="#">首页</a>
3  <a class="p-2" href="#">关于</a>
4  <a class="p-2" href="#">服务</a>
5  <a class="p-2" href="#">价格</a>
6  <a class="p-2" href="#">联系我们</a>
7</nav>

卡片网格

html 
 1<div class="d-flex flex-wrap">
 2  <div class="card m-2" style="width: 18rem;">
 3    <div class="card-body">
 4      <h5 class="card-title">卡片1</h5>
 5      <p class="card-text">使用Flex布局创建的卡片网格示例</p>
 6    </div>
 7  </div>
 8  <div class="card m-2" style="width: 18rem;">
 9    <div class="card-body">
10      <h5 class="card-title">卡片2</h5>
11      <p class="card-text">使用Flex布局创建的卡片网格示例</p>
12    </div>
13  </div>
14  <div class="card m-2" style="width: 18rem;">
15    <div class="card-body">
16      <h5 class="card-title">卡片3</h5>
17      <p class="card-text">使用Flex布局创建的卡片网格示例</p>
18    </div>
19  </div>
20</div>

最佳实践

  • 使用justify-content-*和align-items-*类轻松控制布局对齐
  • 结合Bootstrap的网格系统和Flex布局创建复杂的响应式设计
  • 使用flex-fill类让Flex项目占用可用空间
  • 利用自动边距（如ml-auto）创建间隔和推动效果
  • 在创建等高卡片和内容块时，使用align-items-stretch

通过掌握Bootstrap 4的Flex布局系统，你可以创建出更加灵活、现代化的Web界面，同时减少CSS代码量。