v-card 的大小和位置相对于 v-card 的数量答案

【问题标题】：Size and position of v-cards relative to number of v-cardsv-card 的大小和位置相对于 v-card 的数量
【发布时间】：2022-06-10 23:02:27
【问题描述】：

我有可变数量的 v-cards，它们由图像和文本组成，我想要做的是将所有它们垂直和水平居中并让它们都出现在屏幕上。所以想法是根据它们的数量来改变它们的位置和大小。

这是我现在尝试的（仅作为示例仅 3 张卡）：

       <v-main>
            <v-row align="center" justify="center">
                <v-col v-for="n in 3" :key="n" align-self="center" cols="auto">
                    <v-card width="500px" height="100%">
                        <v-img src="https://i.redd.it/c3uhsgo1vx541.jpg" contain/>
                        Test
                    </v-card>
                </v-col>
            </v-row>
        </v-main>

有这样的结果：

这里的问题是：

它们没有垂直对齐
如果它们更多，则它们不适合窗口（我们必须滚动，我不想这样做）
它们的大小不取决于窗口的大小（最大大小为 500 像素）

我没有在网上找到任何有用的东西（或者我没有找到如何搜索它），有没有人知道如何做到这一点或一个看起来像这样的例子？

【问题讨论】：

标签： javascript css vue.js vuetify.js

【解决方案1】：

我将你的代码复制到沙箱中，它可以正常工作。

你能尝试复制你的吗？

working example in code sandbox

【讨论】：