在vuetify v卡组件中垂直对齐元素

Question

我正在这样显示v行中3个v-col的布局中显示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