vuetify flexbox 项目包装不直接在彼此之上
vuetify flexbox items wrapping not directly on top of each other
我想在 flexbox 中显示多张卡片。
遗憾的是，这些项目在某些浏览器 window 尺寸中无法正确换行。示例：
我的代码：
<v-row>
<v-col v-for="n in 7">
<v-card
max-width="344"
outlined
min-width="350"
height="120"
>
Card
</v-card>
</v-col>
</v-row>
我为此创建了一支笔：https://codepen.io/Tenarius/pen/poywYYW
分辨率为 1920x1040 时问题尤其严重。
如何设置这些项目，使它们在每个分辨率下都完全重叠，尽管 min-width 和 max-width？
您需要从 .col 中删除 flex-grow: 1。
在项目之间免费分发 space。
由于每一行的项目数量不同，免费的space也会有所不同，导致分配不均。
我想在 flexbox 中显示多张卡片。
遗憾的是，这些项目在某些浏览器 window 尺寸中无法正确换行。示例：
我的代码：
<v-row>
<v-col v-for="n in 7">
<v-card
max-width="344"
outlined
min-width="350"
height="120"
>
Card
</v-card>
</v-col>
</v-row>
我为此创建了一支笔：https://codepen.io/Tenarius/pen/poywYYW
分辨率为 1920x1040 时问题尤其严重。
如何设置这些项目，使它们在每个分辨率下都完全重叠，尽管 min-width 和 max-width？
您需要从 .col 中删除 flex-grow: 1。
在项目之间免费分发 space。
由于每一行的项目数量不同，免费的space也会有所不同，导致分配不均。