Vuetify

商店

企业版

Vuetify 附带了一个使用 flex-box 构建的 12 点栅格系统。 网格用于在应用程序的内容中创建特定布局。其中包含 5 种媒体断点,分别用于定位特定屏幕大小或方向:xs, sm, md, lgxl。 这些分辨率在下面的视口断点表中定义,可以通过自定义 Breakpoint service 进行修改。

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

Vuetify 栅格受到 Bootstrap grid 的启发。它通过使用一系列容器,行和列来布局和对齐内容进行集成。 如果您不熟悉Flexbox,参阅链接内容的背景,术语,代码,指南来了解更多 Read the CSS Tricks flexbox guide

在上面的示例中,我们在小型,中型,大型和超大型设备上创建了三个等宽列。父级的 v-container 来居中子级的 v-col

  • v-container 提供了居中和水平填充网站内容的功能。您也可以使用 fluid 属性在所有视口和设备尺寸上完全扩展容器。 遵循以前的 1.x 功能,在这些功能中,属性作为 v-container 中的类传递,从而允许轻松地使用助手类(例如 ma-#/pa-#/fill-height) 进行应用
  • v-rowv-col 的包装组件。它利用 flex 属性来控制内部列的布局和流。它使用的标准边距是 24px。这可以减少 dense 属性或完全移除 no-gutters 。这是 2.x 版本的用法,替换了 1.x 中的 v-layout
  • v-col 是内容所有者,必须是 v-row 的直接子集。 这是 2.x 版本的用法,替换了 1.x 中的 v-flex

确保您了解其局限性和 bugs around flexbox。例如无法 utilize certain HTML elements as flex containers

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

列将自动在其父容器内占据相等的空间。 可以使用 cols 属性修改。 您还可以使用 sm, md, lg, 和 xl 属性来进一步定义如何在不同视口尺寸下调整列的尺寸。

您可以将等宽的列分成多行。 虽然有一些针对较旧版本浏览器的解决方法,有一个 Safari flexbox bug。如果你是最新的浏览器,这应该没有必要。

使用自动布局时,您只能定义一列的宽度,并且仍然具有其同级元素来自动调整其大小。

可以为列分配断点宽度,以根据其内容的自然宽度来调整大小。

默认情况下,flex 组件将自动填充行或列中的可用空间。 当未指定特定大小时,它们还将相对于 flex 容器中的其余 flex 项目收缩。 您可以使用 cols 属性并提供 1 到 12 的值来定义 v-col 的列宽。

根据分辨率动态调整布局。(调整屏幕大小,并在 sm, md, 和 lg 断点上观察顶部的 row 布局更改)

Vuetify 栅格系统的强大和灵活性使您可以创建出色的用户界面。

使用 alignalign-self 属性更改队列及其上级的垂直对齐。

使用 justifyjustify-self 属性更改伸缩项及其父项的水平对齐。

您可以使用 no-gutters 属性去掉 v-row 的负边距让其直接的 v-col 子代的填充。

当给定行中放置超过 12 列时(不使用 .flex-nowrap 工具类),每组额外的列将换行。

您可以控制栅格子项目的排序。与偏移一样,您可以为不同的尺寸设置不同的排序,设计适合任何应用程序的专门的屏幕布局。

您还可以显式指定 firstlast,这将分别为 order CSS 属性分配 -113 值。

偏移对于补偿可能还不可见的元素或控制内容的位置很有用。就像断点一样,您可以为仍和可用的大小设置偏移量,这使您可以根据需要精确调整应用程序布局。

每个断点也可偏移。

使用 auto margin helper utilities 你可以强行将列从彼此分离。

栅格可以被嵌套,类似于其它框架,以实现非常自定义的布局。

当您想要填充可用空间或在两个组件之间留出空间时,v-spacer 组件会很有用。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!