Bootstrap4 弹性盒

Bootstrap 4 弹性盒

使用 Flex 类来控制 Bootstrap 4 组件的布局。

弹性盒

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

灵活的盒子布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。如果您是 Flex 新手，您可以在我们的文章中阅读相关内容CSS Flexbox 教程。

要创建 Flexbox 容器并将直接子项转换为 Flex 项目，请使用d-flex类：

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

水平方向

使用.flex-row水平（并排）显示弹性项目。这是默认的。

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

垂直方向

使用.flex-column垂直显示弹性项目（彼此顶部），或者.flex-column-reverse反转垂直方向：

证明内容合理

使用.justify-content-*类来更改弹性项目的对齐方式。有效的类是start（默认），end,center,between或者around:

填充/等宽

使用.flex-fill在弹性项目上强制它们具有相同的宽度：

生长

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

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

命令

使用以下命令更改特定弹性项目的视觉顺序.order类。有效的类是从 0 到 12，其中最小的数字具有最高的优先级（order-1 显示在 order-2 之前，等等）：

自动边距

轻松为弹性项目添加自动边距.mr-auto（将项目推到右侧），或使用.ml-auto（将项目向左推）：

裹

控制弹性项目如何在弹性容器中包裹.flex-nowrap（默认），.flex-wrap或者.flex-wrap-reverse。

单击下面的按钮，通过更改示例框中的 Flex 项目的包装来查看这三个类之间的区别：

对齐内容

控制垂直对齐聚集弹性项目与.align-content-*类。有效的类是.align-content-start（默认），.align-content-end,.align-content-center,.align-content-between,.align-content-around和.align-content-stretch。

笔记：这些类对单行弹性项目没有影响。

单击下面的按钮，通过更改示例框中 Flex 项目的垂直对齐方式来查看五个类之间的差异：

对齐项目

控制垂直对齐单行的弹性项目.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 类都带有额外的响应类，这使得在特定屏幕尺寸上设置特定 Flex 类变得容易。

这个*符号可以替换为 sm、md、lg 或 xl，分别代表小、中、大或 xlarge 屏幕。