Flex

使用 display 工具，你可以将任何元素转换为 flexbox 容器，将 direct children elements 转换为 flex items。使用其他 flex 属性的工具，你可以进一步自定义它们的交互。

您还可以基于各种断点自定义 flex 工具进行应用。

默认情况下，d-flex 应用的 flex-direction: row 通常可以省略。但是，在某些情况下，您可能需要显式定义它。

flex-column 和 flex-column-reverse 工具类可用于更改 flexbox 容器的方向。请记住，IE11 和 Safari 可能在列的方向存在问题。

flex-direction 也有响应式变化。

可以使用 flex justify 类更改 justify-content 的 flex 设置。默认情况下，这将修改 x-axis 上的 flexbox items，但在使用 flex-direction: column 时将反转，从而修改 y-axis。在 start（浏览器默认）,end, center, between, 或者 around 中进行选择。

justify-content 也有响应式变化。

可以使用 flex align 类更改 align-items 的 flex 设置。默认情况下，这将修改 y-axis 上的 flexbox items，但在使用 flex-direction: column 时将反转，从而修改 x-axis。在 start, end, center, baseline, 或者 stretch（浏览器默认）中进行选择。

align-items 也有响应式变化。

使用 flex 类和 align-self 类的时候，align-self 和 flex 的设置能够被改变。默认情况下，这将修改 x-axis 上的 flexbox 项，但是使用 flex-direction: column 的时候这将反过来修改 y-axis。从 start, end, center, baseline, auto, 或 stretch（浏览器默认） 之间来选择。

align-self-items 也同样有响应式变量。

在 flexbox 容器中使用 margin 助手类，当分别使用 flex-row 或者 flex-column 时，你可以在 x-axis 或者 y-axis 上控制 flex 项的位置。

混合 flex-direction: column 和 align-items，你能够使用 .mt-auto 和 .mb-auto 助手类来挑战 flex 项的位置。

默认的 .d-flex 没有提供任何包装元素（其行为类似于 flex-wrap: nowrap）。这可以通过使用 flex-{condition} 格式的 flex-wrap 助手类来修改。条件可以是 nowrap, wrap, 或者 wrap-reverse。

这些助手类也同样可以使用 flex-{breakpoint}-{condition} 的格式来创建基于断点的响应式增强变量。以下组合可用：

您可以使用 order 工具更改 flex items 的可视顺序。

order 也有响应式变化。

可以使用 flex align-content 类更改 align-content 的 flex 设置。默认情况下，这将修改 x-axis 上的 flexbox items，但在使用 flex-direction: column 时将反转，从而修改 y-axis。在 start（浏览器默认）,end, center, between, around 或者 stretch 中进行选择。

align-content 也有响应式变化。

Vuetify 有一些辅助类，用于手动应用扩展和收缩。这些可以通过添加 flex-{condition}-{value} 帮助类来应用，其中条件可以是 grow 或 shrink，值可以是 0 或者 1 。条件 grow 将允许元素扩大以填充可用空间，而 shrink 将允许元素收缩到其内容所需的空间。但是，只有当元素必须收缩以适应其容器时才会发生这种情况，例如容器大小调整或受到 flex-grow-1 的影响。0 将阻止条件发生，而 1 将允许条件发生。有以下类可供选择：

这些助手类还可以以 flex-{breakpoint}-{condition}-{state} 的格式应用，以创建基于断点的响应性更好的变量。下列组合可供选择：