如何在Vuetify的v-flex元素内实现垂直space-between布局？

嘿，我懂你遇到的问题了——之前的尝试没达到预期，核心原因是右侧的<v-flex xs4>没有占满父容器的高度，导致内部的column布局根本没有足够的垂直空间来发挥justify-space-between的作用。

Vuetify的flex组件默认不会强制子元素继承父容器高度，所以哪怕你嵌套了column布局，它也只会包裹自身内容的高度，没法拉伸到和左侧卡片一样高。下面给你两种用原生Vuetify元素实现预期效果的方法：

方法一：嵌套v-layout并添加fill-height #

给右侧的<v-flex>和内部的<v-layout>都加上fill-height类，确保它们能撑满左侧卡片的高度，再配合column和justify-space-between就能实现垂直space-between布局：

<v-layout row wrap>
  <v-flex xs8>
    <v-card class="red" height="400px"> Fixed Height Card </v-card>
  </v-flex>
  <v-flex xs4 class="purple fill-height">
    <v-layout column justify-space-between fill-height>
      <v-card class="green"> First Card </v-card>
      <v-card class="green"> Second Card </v-card>
    </v-layout>
  </v-flex>
</v-layout>

方法二：直接用原生flex类简化代码 #

如果不想嵌套额外的v-layout，也可以直接给右侧<v-flex>添加Vuetify支持的原生flex类，一步到位：

<v-layout row wrap>
  <v-flex xs8>
    <v-card class="red" height="400px"> Fixed Height Card </v-card>
  </v-flex>
  <v-flex xs4 class="purple d-flex flex-column justify-content-between h-100">
    <v-card class="green"> First Card </v-card>
    <v-card class="green"> Second Card </v-card>
  </v-flex>
</v-layout>

关键属性解释 #

• fill-height / h-100：让元素继承父容器的高度，确保右侧区域能和左侧400px高的卡片对齐。
• column / flex-column：将布局方向设置为垂直列。
• justify-space-between / justify-content-between：在垂直方向上把两个卡片分别推到容器的顶部和底部，中间自动留白。

这两种方法都是完全利用Vuetify的原生flex能力，不需要额外写自定义CSS，就能实现你想要的垂直space-between效果~

内容的提问来源于stack exchange，提问作者Hammerbot