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

我在一个v行内以3个v列的布局显示3个卡片组件，如下所示（所有3个元素当前都是v-card-text元素）：

{{elements}}
{{elements}}
{{elements}}

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

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

---

无论是

v-card

还是

v-card-text

元素都应使用

高度：100%

设置样式。 使用Vuetify css助手类（

d-flex

&

flex column

），将

v-card-text

设置为

display:flex

和

flex direction:column

。此时，您可以使用

v形间隔垫圈

元素将第三个元素移动到底部

例如：

{{元素1}}
{{元素2}}
{{元素3}}
{{元素1}}
{{元素2}}
{{元素3}}
{{元素1}}
{{元素2}}
{{元素3}}
.全高{
身高：100%；
}

有关工作示例，请参见

---

Thx，完美优雅的解决方案。出于某种原因，我的例子似乎不起作用。我目前的理论是，为什么我的自定义组件包含了这三个元素。所以结构是：在ChoiceArchitecture内部，结构正如您所描述的。这会造成问题吗？@masus04你能做一个沙箱吗？类似这样的：？由于某些原因，我现在无法使其正常工作，但它表明了我的想法。@masus04我正在查看您的沙箱，但我看不到有什么不起作用

<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>