Bootstrap 5 Flex 布局

弹性盒模型

Bootstrap 3 和 Bootstrap 4 & 5 之间最大的区别在于 Bootstrap 5 现在使用 flexbox，而不是浮动来处理布局。

弹性盒布局模块使设计灵活的响应式布局结构变得更容易，而无需使用浮动或定位。如果您不熟悉 flex，您可以在我们的 CSS Flexbox 教程 中了解更多信息。

要创建 flexbox 容器并将直接子元素转换为 flex 项目，请使用 d-flex 类

要创建内联 flexbox 容器，请使用 d-inline-flex 类

水平方向

使用 .flex-row 将 flex 项目水平显示（并排）。这是默认设置。

提示：使用 .flex-row-reverse 对齐水平方向。

垂直方向

使用 .flex-column 将 flex 项目垂直显示（彼此之上），或使用 .flex-column-reverse 反转垂直方向。

对齐内容

使用 .justify-content-* 类更改 flex 项目的对齐方式。有效的类是 start（默认）、end、center、between 或 around

填充/等宽

在 flex 项目上使用 .flex-fill 强制它们具有相等的宽度。

增长

在 flex 项目上使用 .flex-grow-1 以占用剩余的空间。在下面的示例中，前两个 flex 项目占用其必要空间，而最后一个项目占用剩余的可用空间。

提示：在 flex 项目上使用 .flex-shrink-1 使其在必要时收缩。

顺序

使用 .order 类更改特定 flex 项目的视觉顺序。有效的类是从 0 到 5，其中数字越小，优先级越高（order-1 显示在 order-2 之前，等等）。

自动边距

使用 .ms-auto（将项目推向右侧）或使用 .me-auto（将项目推向左侧）轻松地向 flex 项目添加自动边距。

换行

使用 .flex-nowrap（默认）、.flex-wrap 或 .flex-wrap-reverse 控制 flex 项目在 flex 容器中的换行方式。

单击下面的按钮，通过更改示例框中 flex 项目的换行方式，查看这三个类之间的区别。

对齐内容

使用 .align-content-* 类控制 **聚集** flex 项目的垂直对齐方式。有效的类是 .align-content-start（默认）、.align-content-end、.align-content-center、.align-content-between、.align-content-around 和 .align-content-stretch。

注意：这些类对 flex 项目的单行没有影响。

单击下面的按钮，通过更改示例框中 flex 项目的垂直对齐方式，查看五个类之间的区别。

对齐项目

使用 .align-items-* 类控制 **单行** flex 项目的垂直对齐方式。有效的类是 .align-items-start、.align-items-end、.align-items-center、.align-items-baseline 和 .align-items-stretch（默认）。

单击下面的按钮查看五个类之间的区别。

自身对齐

使用 .align-self-* 类控制 **特定 flex 项目** 的垂直对齐方式。有效的类是 .align-self-start、.align-self-end、.align-self-center、.align-self-baseline 和 .align-self-stretch（默认）。

单击下面的按钮查看五个类之间的区别。

响应式 Flex 类

所有 flex 类都带有额外的响应式类，这使得在特定屏幕尺寸上设置特定 flex 类变得容易。

符号 * 可以被 sm、md、lg、xl 或 xxl 替换，分别代表小屏幕、中等屏幕、大屏幕、超大屏幕和特大屏幕。