Node.js Vuetify'；水平排列v行的s v形容器

我在一个使用Vue+Vuetify的个人项目中工作。在一个视图中，我将有一个图像徽标和一个拖放区域。为此，我开始测试网格系统（Vuetify 2.X），这让我有点头疼。 为了进行测试，我使用了Vuetify关于网格系统的文档中引用的以下代码：

<template>
  <v-container class="grey lighten-5">
    <v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
      <v-col v-for="k in n + 1" :key="k">
        <v-card class="pa-2" outlined tile> {{ k }} of {{ n + 1 }} </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

{{n+1}中的{k}

此代码的结果应如下所示： 从文档和这个示例中，我了解到v-container充当了一个包，其中包含v-rows，v-rows是包含要显示的信息的v-cols。v形容器将垂直排列v形行，而v形行将水平排列v形列。综上所述，V形容器是矩阵状结构的基础，V形与V型的组合是矩阵的瓦片。 综上所述，在我看来，使用相同的代码，我得到了以下结论：

在这里，v形容器似乎水平地到达v形行，甚至没有居中。 这正常吗？我是不是错过了一个选择，或者问题是从外面来的？

---

谢谢您的时间。

问题是外部的-

v-row

通常在水平行中工作，但是如果容器/包装器设置为

flex-direction:column

，这些行可以成为列。如果容器设置为

display:flex

，那么默认情况下

v行将水平堆叠。谢谢，这就是原因。我在不同的视图中有“display:flex”，其中有一些视频播放器。我把它们和v型排移走了，排列正确，完美！