如何将Vuetify中v-tab-item内的最后一个v-row定位到容器底部

要实现将v-tab-item内的最后一个v-row对齐到容器底部，直接利用Vuetify内置的flex布局工具类即可完成，无需额外自定义复杂样式，具体操作如下：

关键调整步骤 #

1. 给目标<v-tab-item>添加d-flex flex-column类，将其转换为垂直方向的flex容器
2. 给需要固定到底部的最后一个<v-row>添加mt-auto类，通过自动填充上方剩余空间，将元素推至容器底部
3. 给父容器（如<v-card>）设置min-height，确保有足够垂直空间来体现底部对齐效果

修改后的完整代码示例 #

<v-container class="pa-0">
  <v-card flat style="min-height: 400px;"> <!-- 设置最小高度保证效果可见 -->
    <v-tabs fixed-tabs>
      <v-tab>
        tab 1
      </v-tab>

      <v-tab>
        tab 2
      </v-tab>

      <v-tab-item class="d-flex flex-column"> <!-- 转为垂直flex容器 -->
        <v-row
          style="border: 2px solid red;"
          no-gutters
        >
          <v-col>
            Lorem ipsum...
          </v-col>
        </v-row>

        <v-row
          style="border: 2px solid purple;"
          no-gutters
        >
          <v-col>
            Lorem ipsum...
          </v-col>
        </v-row>

        <v-row
          style="border: 2px solid orange;"
          no-gutters
          class="mt-auto" <!-- 自动填充上方空间，固定到底部 -->
        >
          <v-col>
            Lorem ipsum...
          </v-col>
        </v-row>
      </v-tab-item>
    </v-tabs>
  </v-card>
</v-container>

效果原理说明 #

• d-flex + flex-column让v-tab-item内的元素沿垂直方向排列
• mt-auto会自动计算并填充当前元素与上方内容之间的所有剩余空间，从而将最后一行固定在容器底部
• 设置min-height是为了避免容器高度被内容完全撑满，导致底部对齐效果无法直观体现

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