Flex
Flex 工具类用于控制 Flex 布局。通过改变 flex 属性，可以实现元素的自适应、对齐等效果。区别于栅格布局，Flex 工具类更加灵活，可以创建更复杂的布局。
基础用法
方向控制
使用 .flex-row 设置水平方向（浏览器默认），或 .flex-row-reverse 定义水平反向。
使用 .flex-column 设置垂直方向，或 .flex-column-reverse 定义垂直反向。
内容对齐
在 flexbox 容器上使用 .justify-content-* 工具类来更改主轴上 flex 项目的对齐方式（起始为 x 轴，如果 flex-direction: column 则为 y 轴）。* 可以是 start （浏览器默认）、 end 、 center 、 between 、 around 或 evenly。
在 flexbox 容器上使用 .align-items-* 工具类来更改交叉轴上 flex 项目的对齐方式（起始为 y 轴，如果 flex-direction: column 则为 x 轴）。* 可以是 start 、 end 、 center 、 baseline 或 stretch。
在 flexbox 容器上使用 .align-content-* 工具类来更改多行容器交叉轴上 flex 项目的对齐方式（起始为 y 轴，如果 flex-direction: column 则为 x 轴）。* 可以是 start 、 end 、 center 、 between 、 around 或 stretch。
注意：此属性对单行弹性项目没有影响。
独立交叉轴对齐
在 flexbox 容器上使用 .align-self-* 工具类来更改单个 flex 项目的对齐方式。* 可以是 start 、 end 、 center 、 baseline 或 stretch。
项目缩放
在一系列同级元素上使用 .flex-fill 类，强制它们的宽度等于它们的内容（如果它们的内容没有超出它们的边框，则宽度相等），同时占用所有可用的水平空间。
使用 .flex-grow-* 工具类切换弹性项目扩展以填充可用空间的能力。在下面的示例中， .flex-grow-1 元素使用其所能使用的所有可用空间，同时为其余两个弹性项目留出必要的空间。
使用 .flex-shrink-* 工具类在必要时切换弹性项目的收缩能力。在下面的示例中，第二个带有 .flex-shrink-1 的弹性项目中的内容被强制换行，「收缩」以便为前一个带有 width: 100% 的弹性项目留出更多空间。
顺序调整
使用 .order-* 工具类更改特定弹性项目的视觉顺序。我们仅提供将项目设为第一或最后以及重置以使用 DOM 顺序的选项。由于 order 采用 0 到 5 之间的任何整数值，因此可以为任何需要的其他值添加自定义 CSS。
速查表
| 类名 | 样式 |
|---|---|
.d-flex | display: flex |
.d-inline-flex | display: inline-flex |
.flex-fill | flex: 1 1 auto |
.flex-row | flex-direction: row |
.flex-row-reverse | flex-direction: row-reverse |
.flex-column | flex-direction: column |
.flex-column-reverse | flex-direction: column-reverse |
.flex-wrap | flex-wrap: wrap |
.flex-nowrap | flex-wrap: nowrap |
.flex-wrap-reverse | flex-wrap: wrap-reverse |
.justify-content-start | justify-content: flex-start |
.justify-content-end | justify-content: flex-end |
.justify-content-center | justify-content: center |
.justify-content-between | justify-content: space-between |
.justify-content-around | justify-content: space-around |
.justify-content-evenly | justify-content: space-evenly |
.align-items-start | align-items: flex-start |
.align-items-end | align-items: flex-end |
.align-items-center | align-items: center |
.align-items-baseline | align-items: baseline |
.align-items-stretch | align-items: stretch |
.align-content-start | align-content: flex-start |
.align-content-end | align-content: flex-end |
.align-content-center | align-content: center |
.align-content-between | align-content: space-between |
.align-content-around | align-content: space-around |
.align-content-stretch | align-content: stretch |
.align-self-start | align-self: flex-start |
.align-self-end | align-self: flex-end |
.align-self-center | align-self: center |
.align-self-baseline | align-self: baseline |
.align-self-stretch | align-self: stretch |
.flex-grow-0 | flex-grow: 0 |
.flex-grow-1 | flex-grow: 1 |
.flex-shrink-0 | flex-shrink: 0 |
.flex-shrink-1 | flex-shrink: 1 |
.order-first | order: -1 |
.order-1 | order: 1 |
.order-2 | order: 2 |
.order-3 | order: 3 |
.order-4 | order: 4 |
.order-5 | order: 5 |
.order-last | order: 6 |
以上所有类均支持响应式前缀，如
sm:,md:,lg:,xl:。