如何在 vuetify 2 中对卡片进行环绕水平对齐？

Question

我有一个使用 vuetify 2 构建的小项目，但我遇到的问题是宽度为 7 的 col，我的所有卡片都垂直显示，而不是水平溢出。

我希望实现的是卡片彼此垂直，计数为 5，溢出移动到第二行。

我的行排列是 row > col2 col7 col3 /row。我没有使用 v-container，因为它似乎在中间放了一个容器，而不是占据整个屏幕。

我已经尝试使用基于 vuetify 文档的 flex-wrap、flex-column、flex-row 等类，但这似乎并没有改变任何东西。我发现的大多数关于此的示例都是针对 vuetify 1 的，并且组件结构不同。

Codesandbox

App.vue

<template>
  <v-app>
    <v-app-bar
      color="dark"
      dark dense
    >
    </v-app-bar>

    <v-row no-gutters>
      <v-col fluid cols="2"></v-col>

      <v-col fluid cols="7">
        <HelloWorld v-for="c in 10" :key="c" />
      </v-col>

      <v-col fluid cols="3"></v-col>
    </v-row>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

HelloWorld.vue

<template>
  <v-card class="mx-auto" max-width="344" outlined>
    <v-list-item three-line>
      <v-list-item-content>
        <div class="overline mb-4">OVERLINE</div>
        <v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
        <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
      </v-list-item-content>

      <v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
    </v-list-item>

    <v-card-actions>
      <v-btn text>Button</v-btn>
      <v-btn text>Button</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  name: "HelloWorld"
};
</script>

我现在拥有的是这样的：箭头显示我希望后续卡片如何位于卡片旁边，依此类推。

Answer 1

如果您想忽略换行，只需添加 .flex-nowrap 类：

<v-row class="flex-nowrap">

更新 我知道了。你把卡片贴在 col 里面。我的赌注。 你可以这样做：

<template>
  <v-app>
    <v-app-bar
      color="dark"
      dark dense
    >
    </v-app-bar>

    <v-row no-gutters>
      <v-col cols="2"></v-col>
      <v-col cols="7">
        <v-row no-gutters>
            <v-col v-for="c in 10" :key="c" cols="4">
                <HelloWorld/>
            </v-col>
        </v-row>
      </v-col>
      <v-col cols="3"></v-col>
    </v-row>
  </v-app>
</template>