The v-container can be used for a center focused page, or given the fluid prop to extend its full width. v-layout is used for separating sections and contains the v-flex. The structure of your layout will be as follows, v-container » v-layout » v-flex. Each part of the grid chain is a flex-box element. The final, v-flex, automatically sets its children to have flex: 1 1 auto.
For convenience reasons, these components automatically transform attributes into classes. Allowing you to write <v-layout pa-3 mb-2></v-layout> instead of <v-layout class="pa-3 mb-2"></v-layout>. The only exception are data attributes which are left as-is.

Test the layout props in a simple playground.

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

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

以各种方式指定方向和对齐方式。所有可用的flex-box api都可以通过直观的辅助器属性获得。

更具分辨率动态更改布局。（调整您的屏幕，并观看布局更改为一个行的小断点）

Flex components can utilize the grow and shrink props to automatically fill available space in a row or shrink to only use the space needed for its contents.

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

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

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

有的时候您会想要将一个布局项指定为特定的标签，比如一个section或者li元素。