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

Question

我在 v 行内的 3 个 v 列布局中显示 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-text 设置为 display: 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一个工作示例