项目在 vue 中未正确对齐

Question

我正在使用 vue 和 vuetify 库来创建页面。在页面上，我有卡片，可以是我想要显示的任何数字。我正在使用循环来显示所有卡片。但是对齐有问题。所有卡片都排成一整排。如果卡只是几张就可以了。那么对齐看起来很好。但如果卡片更像是 10 张左右，页面就会看起来不对。

<template>
<div class="d-flex justify-center mb-6 mt-10">

    <v-card
      class="mr-4 ml-4"
      v-for="(cat, index) in cards"
      :key="index"
      outlined
    >
      <v-card-actions>
        <v-btn @click="getdata(cat._id)" plain>
          {{ cat.category }}
        </v-btn>
      </v-card-actions>
    
  </v-card>
</div>

Answer 1

您应该添加 class flex-wrap 以便项目在新行中继续而不是溢出。

// (...)
<div class="d-flex justify-center flex-wrap mb-6 mt-10">
// (...)