vuetify v-card组件中的元素垂直对齐答案

【问题标题】：Vertically align elements in vuetify v-card componentvuetify v-card组件中的元素垂直对齐
【发布时间】：2020-07-15 11:02:21
【问题描述】：

我在这样的 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 总是在相同的位置：

【问题讨论】：

标签： vuetify.js vertical-alignment vcf-vcard

【解决方案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

【讨论】：

谢谢，伟大而优雅的解决方案。出于某种原因，它似乎不适用于我的示例。我目前关于为什么涉及包含三个元素的自定义组件的理论。所以结构是：而在 ChoiceArchitecture 内部，结构与您描述的一样。这会造成问题吗？
@masus04 你能做一个沙盒吗？
类似这样的东西：codesandbox.io/s/vuetify-card-elements-placement-hsytq?file=/… ?出于某种原因，我现在无法使其正常工作，但它显示了这个想法。
@masus04 我正在查看您的沙盒，但没有看到什么不起作用