Bootstrap4 Flex布局

Flex布局的作用

Flexbox是一种一维布局模型，能够更有效地对容器中的元素进行排列、对齐和分配空间。Bootstrap 4全面采用Flexbox作为其布局系统的基础，提供了丰富的Flex工具类来简化布局开发。

Flex容器

使用.d-flex和.d-inline-flex类创建Flex容器。

Flex容器示例
块级Flex容器 (.d-flex)
Flex项目 1
Flex项目 2
Flex项目 3
内联Flex容器 (.d-inline-flex)
内联Flex 1
内联Flex 2
普通文本
HTML 代码：
<!-- 块级Flex容器 -->
<div class="d-flex">
  <div>Flex项目 1</div>
  <div>Flex项目 2</div>
  <div>Flex项目 3</div>
</div>

<!-- 内联Flex容器 -->
<div class="d-inline-flex">
  <div>内联Flex 1</div>
  <div>内联Flex 2</div>
</div>

Flex方向

使用方向类控制Flex项目的排列方向。

Flex方向示例
行方向 (.flex-row) - 默认
项目 1
项目 2
项目 3
行反向 (.flex-row-reverse)
项目 1
项目 2
项目 3
列方向 (.flex-column)
项目 1
项目 2
项目 3
列反向 (.flex-column-reverse)
项目 1
项目 2
项目 3
HTML 代码：
<!-- 行方向 -->
<div class="d-flex flex-row">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 行反向 -->
<div class="d-flex flex-row-reverse">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 列方向 -->
<div class="d-flex flex-column">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 列反向 -->
<div class="d-flex flex-column-reverse">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

主轴对齐

使用.justify-content-*类控制Flex项目在主轴上的对齐方式。

主轴对齐示例
起始对齐 (.justify-content-start) - 默认
项目 1
项目 2
项目 3
居中对齐 (.justify-content-center)
项目 1
项目 2
项目 3
末尾对齐 (.justify-content-end)
项目 1
项目 2
项目 3
两端对齐 (.justify-content-between)
项目 1
项目 2
项目 3
等间距对齐 (.justify-content-around)
项目 1
项目 2
项目 3
HTML 代码：
<!-- 起始对齐 -->
<div class="d-flex justify-content-start">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 居中对齐 -->
<div class="d-flex justify-content-center">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 两端对齐 -->
<div class="d-flex justify-content-between">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 等间距对齐 -->
<div class="d-flex justify-content-around">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

交叉轴对齐

使用.align-items-*和.align-self-*类控制Flex项目在交叉轴上的对齐方式。

交叉轴对齐示例
拉伸对齐 (.align-items-stretch) - 默认
项目 1
项目 2
项目 3
起始对齐 (.align-items-start)
项目 1
项目 2
项目 3
居中对齐 (.align-items-center)
项目 1
项目 2
项目 3
末尾对齐 (.align-items-end)
项目 1
项目 2
项目 3
基线对齐 (.align-items-baseline)
项目 1
项目 2
项目 3
单个项目对齐 (.align-self-*)
顶部对齐
居中对齐
底部对齐
拉伸对齐
HTML 代码：
<!-- 居中对齐 -->
<div class="d-flex align-items-center">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 单个项目对齐 -->
<div class="d-flex">
  <div class="align-self-start">顶部对齐</div>
  <div class="align-self-center">居中对齐</div>
  <div class="align-self-end">底部对齐</div>
  <div class="align-self-stretch">拉伸对齐</div>
</div>

Flex项目属性

控制Flex项目的填充、排序和伸缩比例。

Flex项目属性示例
自动填充 (.flex-fill)
填充项目
固定项目
填充项目
Flex增长 (.flex-grow-*)
增长 1
不增长
增长 1
Flex收缩 (.flex-shrink-*)
宽项目 (可收缩)
宽项目 (不收缩)
宽项目 (可收缩)
Flex排序 (.order-*)
第一项 (order-3)
第二项 (order-1)
第三项 (order-2)
HTML 代码：
<!-- 自动填充 -->
<div class="d-flex">
  <div class="flex-fill">填充项目</div>
  <div>固定项目</div>
  <div class="flex-fill">填充项目</div>
</div>

<!-- Flex增长 -->
<div class="d-flex">
  <div class="flex-grow-1">增长 1</div>
  <div>不增长</div>
  <div class="flex-grow-1">增长 1</div>
</div>

<!-- Flex排序 -->
<div class="d-flex">
  <div class="order-3">第一项 (order-3)</div>
  <div class="order-1">第二项 (order-1)</div>
  <div class="order-2">第三项 (order-2)</div>
</div>

自动换行

使用.flex-wrap类控制Flex项目是否换行。

自动换行示例
不换行 (.flex-nowrap) - 默认
宽项目 1
宽项目 2
宽项目 3
宽项目 4
宽项目 5
换行 (.flex-wrap)
宽项目 1
宽项目 2
宽项目 3
宽项目 4
宽项目 5
反向换行 (.flex-wrap-reverse)
宽项目 1
宽项目 2
宽项目 3
宽项目 4
宽项目 5
HTML 代码：
<!-- 不换行 -->
<div class="d-flex flex-nowrap">
  <div style="min-width: 150px;">宽项目 1</div>
  <div style="min-width: 150px;">宽项目 2</div>
  <div style="min-width: 150px;">宽项目 3</div>
  <div style="min-width: 150px;">宽项目 4</div>
  <div style="min-width: 150px;">宽项目 5</div>
</div>

<!-- 换行 -->
<div class="d-flex flex-wrap">
  <div style="min-width: 150px;">宽项目 1</div>
  <div style="min-width: 150px;">宽项目 2</div>
  <div style="min-width: 150px;">宽项目 3</div>
  <div style="min-width: 150px;">宽项目 4</div>
  <div style="min-width: 150px;">宽项目 5</div>
</div>

响应式Flex类

Bootstrap 4提供了响应式的Flex类，可以在不同屏幕尺寸下应用不同的Flex属性。

响应式Flex类示例
响应式Flex方向
小屏: 列
中屏+: 行
响应式布局
响应式对齐
小屏: 左对齐
中屏: 居中对齐
大屏: 右对齐
响应式排序
第一项 (小屏: 3)
第二项 (小屏: 1)
第三项 (小屏: 2)
HTML 代码：
<!-- 响应式Flex方向 -->
<div class="d-flex flex-column flex-md-row">
  <div>小屏: 列</div>
  <div>中屏+: 行</div>
  <div>响应式布局</div>
</div>

<!-- 响应式对齐 -->
<div class="d-flex justify-content-start justify-content-md-center justify-content-lg-end">
  <div>小屏: 左对齐</div>
  <div>中屏: 居中对齐</div>
  <div>大屏: 右对齐</div>
</div>

<!-- 响应式排序 -->
<div class="d-flex">
  <div class="order-3 order-md-1">第一项 (小屏: 3)</div>
  <div class="order-1 order-md-2">第二项 (小屏: 1)</div>
  <div class="order-2 order-md-3">第三项 (小屏: 2)</div>
</div>
响应式断点前缀：
断点 类前缀 屏幕尺寸
超小屏 .d-flex < 576px
小屏 .d-sm-flex ≥ 576px
中屏 .d-md-flex ≥ 768px
大屏 .d-lg-flex ≥ 992px
超大屏 .d-xl-flex ≥ 1200px

实际应用示例

Flex布局在实际项目中的应用场景。

实际应用示例
导航栏布局
卡片布局
卡片标题

这是一些卡片内容文本，使用flex-grow-1让内容区域填充剩余空间。

¥99
卡片标题

这是另一张卡片的内容。

¥149
页脚布局
HTML 代码（卡片布局）：
<div class="card">
  <div class="card-body d-flex flex-column">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text flex-grow-1">卡片内容文本</p>
    <div class="d-flex justify-content-between align-items-center">
      <span class="text-muted">¥99</span>
      <button class="btn btn-primary">购买</button>
    </div>
  </div>
</div>

最佳实践

使用Flex布局时，遵循以下最佳实践可以提升开发效率和代码质量。

Flex布局最佳实践
  • 优先使用Bootstrap工具类 - 尽可能使用Bootstrap提供的Flex工具类，而不是编写自定义CSS
  • 合理使用响应式类 - 根据设计需求在不同断点使用相应的Flex类
  • 保持语义化 - 使用有意义的HTML结构，避免过度依赖Flex布局
  • 考虑可访问性 - 确保Flex布局不会影响内容的可访问性
  • 测试不同屏幕尺寸 - 在各种设备上测试Flex布局的响应式效果
  • 适度使用 - 不是所有布局都需要使用Flex，有时网格系统可能更合适

学习完成！

恭喜！您已经掌握了Bootstrap 4 Flex布局的使用方法。Flex布局是创建现代、响应式网页设计的重要工具，合理使用可以大大提高布局的灵活性和开发效率。

继续学习下一章：Bootstrap 4 工具类

上一章:Bootstrap4 小工具 下一章:Bootstrap4 多媒体对象