vuetify.js - vuetify v-card组件中的元素垂直对齐

Question

我在这样的 v-row 内以 3 个 v-cols 的布局显示 3 个卡片组件（所有 3 个元素当前都是 v-card-text 元素）：

<v-row>
  <v-col>
    <v-card>{{elements}}</v-card>
  </v-col>

  <v-col>
    <v-card>{{elements}}</v-card>
  </v-col>

  <v-col>
    <v-card>{{elements}}</v-card>
  </v-col>
</v-row>

由于元素 2 的内容由动态添加的各种长度的文本组成，因此它们的长度和高度并不总是相同，导致如下情况：

我想要实现的是，根据最大的列，每个元素都放置在所有三列的相同位置，因此元素 3 始终位于相同位置：

Answer 1

v-card和元素都v-card-text应该使用height: 100%. 使用 Vuetify css 辅助类 ( d-flex& flex-column)，将v-card-texttodisplay: flex和flex-direction: column. 此时可以使用v-spacer元素将第三个元素移动到底部。

例子：

<v-row>
  <v-col cols="4">
    <v-card class="full-height">
      <v-card-text class="full-height pa-2 d-flex flex-column">
        {{ element 1 }}
        {{ element 2 }}
        <v-spacer/>
        {{ element 3 }}
      </v-card-text>
    </v-card>
  </v-col>
  <v-col cols="4">
    <v-card class="full-height">
      <v-card-text class="full-height pa-2 d-flex flex-column">
        {{ element 1 }}
        {{ element 2 }}
        <v-spacer/>
        {{ element 3 }}
      </v-card-text>
    </v-card>
  </v-col>
  <v-col cols="4">
    <v-card class="full-height">
      <v-card-text class="full-height pa-2 d-flex flex-column">
        {{ element 1 }}
        {{ element 2 }}
        <v-spacer/>
        {{ element 3 }}
      </v-card-text>
    </v-card>
  </v-col>
</v-row>

<style scoped>
.full-height {
  height: 100%;
}
</style>

有关工作示例，请参见SandBox