Bootstrap 5 Flex 布局

Flexbox

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

Flexible Box Layout Module，使设计灵活的响应式布局结构更加容易，无需使用浮动或定位。如果您不熟悉 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，分别代表小、中、大、超大和特大屏幕。