Bootstrap 4 Flex

Bootstrap 4 弹性布局

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

Flexbox

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

Flexible Box Layout Module，无需使用 float 或 positioning 即可更轻松地设计灵活的响应式布局结构。如果您不熟悉 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 到 12，数字越小优先级越高（order-1 显示在 order-2 之前，依此类推）

自动边距

使用 .mr-auto（将项目推到右侧）或使用 .ml-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，分别代表小、中、大或超大屏幕。