Vue+Vuetify：如何将v-img内容器行对齐至底部（支持多行扩展）

我正在使用Vue和Vuetify，需要把v-img内部容器里的某一行对齐到容器底部。之前给v-img添加align-end属性能实现效果，但未来要在容器中添加更多行，这个单一设置满足不了需求。当前效果如下：

我的代码如下：

<template>
    <v-card
        class="rounded-0"
        width="300px"
    >
        <v-img
            :src="cover"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8)"
            cover
        >
            <v-container full-height fluid height="100%">
                <v-row class="align-self-end">
                    <v-col cols="9">
                        <v-card-title class="text-white">{{ title + ' ' + number }}</v-card-title>
                    </v-col>
                    <v-col cols="3">
                        <v-btn
                            v-if="showAddButton"
                            class="icon"
                            variant="plain"
                            color="white"
                            icon="mdi-plus"
                            @click="addToCollection(id)"
                        >
                        </v-btn>
                        <v-btn
                            v-if="showRemoveButton"
                            class="icon"
                            variant="plain"
                            color="white"
                            icon="mdi-minus"
                            @click="removeFromCollection(id)"
                        >
                        </v-btn>
                    </v-col>
                </v-row>
            </v-container>
        </v-img>
    </v-card>
</template>

<style>
.icon {
    font-size: 30px !important;
    opacity: 1 !important;
}
</style>

可以通过给v-container设置弹性列布局，再给需要对齐到底部的v-row添加mt-auto类来实现，这样即使后续添加更多行，也不会影响该行的底部对齐：

修改后的核心代码如下：

<v-container full-height fluid height="100%" class="d-flex flex-column">
    <!-- 后续可添加的其他行示例 -->
    <!-- <v-row>
        <v-col>其他内容</v-col>
    </v-row> -->
    
    <v-row class="mt-auto">
        <v-col cols="9">
            <v-card-title class="text-white">{{ title + ' ' + number }}</v-card-title>
        </v-col>
        <v-col cols="3">
            <v-btn
                v-if="showAddButton"
                class="icon"
                variant="plain"
                color="white"
                icon="mdi-plus"
                @click="addToCollection(id)"
            >
            </v-btn>
            <v-btn
                v-if="showRemoveButton"
                class="icon"
                variant="plain"
                color="white"
                icon="mdi-minus"
                @click="removeFromCollection(id)"
            >
            </v-btn>
        </v-col>
    </v-row>
</v-container>

原理说明 #

• d-flex flex-column：将v容器设置为垂直方向的弹性布局，让内部元素按垂直顺序排列
• mt-auto：给目标行添加该类后，会自动占据容器上方的剩余空间，从而将该行推至容器底部，完美适配后续添加其他行的场景

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