Flexbox（弹性盒子布局）是一种一维布局模型，可以轻松地控制项目在容器中的排列、对齐和分布。
Bootstrap 5 提供了一套完整的Flex工具类，可以快速实现各种布局需求：
轻松适应不同屏幕尺寸
复杂的对齐和分布需求
内置响应式断点
使用类名而非自定义CSS
Flex布局涉及两个主要概念：Flex容器和Flex项目。
<!-- Flex容器 -->
<div class="d-flex">
<!-- Flex项目 -->
<div class="flex-item">项目 1</div>
<div class="flex-item">项目 2</div>
<div class="flex-item">项目 3</div>
</div>使用 .d-flex 创建一个Flex容器，其直接子元素自动成为Flex项目。
使用方向类控制Flex项目在容器中的排列方向。
使用 .flex-row 类设置水平方向（默认值）：
<div class="d-flex flex-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .flex-column 类设置垂直方向：
<div class="d-flex flex-column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .flex-row-reverse 类设置反向水平方向：
<div class="d-flex flex-row-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .flex-column-reverse 类设置反向垂直方向：
<div class="d-flex flex-column-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .justify-content-* 类控制Flex项目在主轴上的对齐方式。
使用 .justify-content-start 类设置项目在主轴起始位置对齐：
<div class="d-flex justify-content-start">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .justify-content-center 类设置项目在主轴居中对齐：
<div class="d-flex justify-content-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .justify-content-end 类设置项目在主轴末尾对齐：
<div class="d-flex justify-content-end">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .justify-content-between 类设置项目在主轴两端对齐：
<div class="d-flex justify-content-between">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .justify-content-around 类设置项目在主轴周围对齐：
<div class="d-flex justify-content-around">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .justify-content-evenly 类设置项目在主轴均匀对齐：
<div class="d-flex justify-content-evenly">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .align-items-* 类控制Flex项目在交叉轴上的对齐方式。
使用 .align-items-start 类设置项目在交叉轴起始位置对齐：
<div class="d-flex align-items-start">
<div style="height: 60px;">1</div>
<div style="height: 40px;">2</div>
<div style="height: 80px;">3</div>
</div>使用 .align-items-center 类设置项目在交叉轴居中对齐：
<div class="d-flex align-items-center">
<div style="height: 60px;">1</div>
<div style="height: 40px;">2</div>
<div style="height: 80px;">3</div>
</div>使用 .align-items-end 类设置项目在交叉轴末尾对齐：
<div class="d-flex align-items-end">
<div style="height: 60px;">1</div>
<div style="height: 40px;">2</div>
<div style="height: 80px;">3</div>
</div>使用 .align-items-baseline 类设置项目在基线对齐：
<div class="d-flex align-items-baseline">
<div style="height: 60px; padding-top: 20px;">1</div>
<div style="height: 40px; padding-top: 10px;">2</div>
<div style="height: 80px; padding-top: 30px;">3</div>
</div>使用 .align-items-stretch 类设置项目在交叉轴拉伸对齐：
<div class="d-flex align-items-stretch">
<div>1</div>
<div>2</div>
<div>3</div>
</div>使用 .align-self-* 类控制单个Flex项目在交叉轴上的对齐方式。
可以单独控制每个Flex项目的对齐方式：
<div class="d-flex">
<div class="align-self-start">align-self-start</div>
<div class="align-self-center">align-self-center</div>
<div class="align-self-end">align-self-end</div>
<div class="align-self-baseline">align-self-baseline</div>
<div class="align-self-stretch">align-self-stretch</div>
</div>使用 .flex-*-wrap 类控制Flex项目的换行行为。
使用 .flex-nowrap 类设置项目不换行：
<div class="d-flex flex-nowrap">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
<div>项目 4</div>
<div>项目 5</div>
<div>项目 6</div>
</div>使用 .flex-wrap 类设置项目换行：
<div class="d-flex flex-wrap">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
<div>项目 4</div>
<div>项目 5</div>
<div>项目 6</div>
</div>使用 .flex-wrap-reverse 类设置项目反向换行：
<div class="d-flex flex-wrap-reverse">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
<div>项目 4</div>
<div>项目 5</div>
<div>项目 6</div>
</div>使用 .order-* 类控制Flex项目的显示顺序。
可以重新排列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 class="order-5">第四项 (order-5)</div>
<div class="order-4">第五项 (order-4)</div>
</div>使用 .flex-fill 和 .flex-grow-* / .flex-shrink-* 类控制Flex项目的填充和伸缩行为。
使用 .flex-fill 类设置项目等宽填充：
<div class="d-flex">
<div class="flex-fill">flex-fill</div>
<div class="flex-fill">flex-fill</div>
<div class="flex-fill">flex-fill</div>
</div>使用 .flex-grow-* 和 .flex-shrink-* 类控制项目的伸缩：
<div class="d-flex">
<div class="flex-grow-1">flex-grow-1</div>
<div>固定宽度</div>
<div class="flex-grow-1">flex-grow-1</div>
</div>Bootstrap 5 的Flex工具类支持响应式断点，可以在不同屏幕尺寸下应用不同的Flex行为。
在不同屏幕尺寸下改变Flex方向和对齐方式：
<div class="d-flex flex-column flex-md-row
justify-content-start justify-content-md-between
align-items-center align-items-md-start">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
</div>在移动设备上（<768px）：垂直方向、起始对齐、居中对齐
在中等及以上设备上（≥768px）：水平方向、两端对齐、起始对齐
Bootstrap 5 提供了以下响应式断点前缀：
.d-{value} - 所有屏幕.d-sm-{value} - ≥576px.d-md-{value} - ≥768px.d-lg-{value} - ≥992px.d-xl-{value} - ≥1200px.d-xxl-{value} - ≥1400px<!-- 在中等及以上屏幕显示为flex，小屏幕显示为block -->
<div class="d-block d-md-flex">
<div>内容</div>
</div>
<!-- 在大屏幕居中对齐，其他屏幕起始对齐 -->
<div class="d-flex justify-content-start justify-content-lg-center">
<div>内容</div>
</div>使用下面的控件实时调整Flex容器的属性，观察效果变化。
<div class="d-flex flex-row justify-content-start align-items-start flex-nowrap">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
<div>项目 4</div>
<div>项目 5</div>
</div>