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-row-reverse 可水平方向右对齐:

垂直方向

请使用 .flex-column 垂直显示 flex 项目（彼此堆叠），或使用 .flex-column-reverse 反转垂直方向:

对齐内容

使用 .justify-content-* 类可改变弹性项目的对齐方式。有效的类是:

• 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-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse，可控制 flex 项目如何包装在 flex 容器中。

单击下面的按钮，通过更改示例框中弹性项目的包装，查看三个类之间的差异:

对齐内容

请使用 .align-content-* 类控制弹性项目的垂直对齐方式。有效的类是:

• .align-content-start（默认）
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch

注释: 这些类对单行弹性项没有影响。

请单击下面的按钮，通过更改实例框中弹性项的垂直对齐方式来查看五个类的区别:

对齐项目

请使用 .align-items-* 类控制单行弹性项目的垂直对齐方式。有效的类是:

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch（默认）

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

自我对齐

请使用 .align-self-* 类控制指定弹性项目的垂直对齐方式。有效的类是:

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch（默认）

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

响应式 Flex 类

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

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