启用 Flex
<div class="d-flex">弹性盒容器</div>
<div class="d-inline-flex">行内弹性盒</div>
<div class="d-flex d-md-inline-flex">响应式切换</div>
主轴方向
| 类名 | 方向 |
|---|
.flex-row | 水平（默认） |
.flex-row-reverse | 水平反向 |
.flex-column | 垂直 |
.flex-column-reverse | 垂直反向 |
<div class="d-flex flex-column">
<div>项目 1</div>
<div>项目 2</div>
</div>
对齐方式
主轴对齐（justify-content）：
| 类名 | 效果 |
|---|
.justify-content-start | 起点对齐（默认） |
.justify-content-end | 终点对齐 |
.justify-content-center | 居中对齐 |
.justify-content-between | 两端对齐 |
.justify-content-around | 均匀分布（两侧间距一半） |
.justify-content-evenly | 均匀分布（等距） |
交叉轴对齐（align-items）：
| 类名 | 效果 |
|---|
.align-items-start | 顶部对齐 |
.align-items-end | 底部对齐 |
.align-items-center | 垂直居中 |
.align-items-baseline | 基线对齐 |
.align-items-stretch | 拉伸填充（默认） |
<div class="d-flex justify-content-center align-items-center" style="height:200px">
<div>水平垂直居中</div>
</div>
排列顺序
<div class="d-flex">
<div class="order-3">排第三</div>
<div class="order-1">排第一</div>
<div class="order-2">排第二</div>
</div>
自动边距
<div class="d-flex">
<div>左对齐</div>
<div class="ms-auto">右对齐</div>
</div>
包裹与填充
<div class="d-flex flex-wrap">
<div class="flex-fill">等宽填充</div>
<div class="flex-fill">等宽填充</div>
</div>
<div class="d-flex">
<div class="flex-grow-1">占据剩余空间</div>
<div class="flex-shrink-0">禁止收缩</div>
</div>
所有 Flexbox 工具类均支持响应式前缀，如 .d-md-flex、.flex-lg-row、.justify-content-xl-center。