如何将我的 v-img 和 v-card 放在 v-flex 中？

Question

总结

我正在尝试以正方形的形式连续显示一些专辑图片就像在下面的代码笔中。不幸的是，我遇到了一个问题。当我的浏览器中的视图改变大小时，图片应该由相等的空间分开，但是当视图似乎在sm 和xs 中时它会改变。

问题

sm 和 xs 中容器中卡片之间的空间似乎不足。从md 移动到sm 时，您可以看到我的问题。 Here the space between the cards are a lot bigger than expected另外，我觉得卡片应该在那些模式下的视图中心，就像它在md 和上层一样。 The card should be at the center, but isn't

暂定

我尝试将v-flex 设置为xs{size}，但是当我在浏览器中更改视图大小时v-card 相互重叠。

代码

https://codepen.io/anon/pen/WqjrwK

预期

我希望v-card 和v-img 在xs 和sm 中与md 和lg 用相同的空格分开。使用上面的链接在 codepen 中更改浏览器的视图大小以查看您的问题。 The view as expected. It should be similar in sm and xs

Answer 1

更新答案

您需要 v-flex 的属性 flex-grow-0 大小

和父 div 有justify-content: center

此图片和 codepen 中的解决方案：https://codepen.io/meabed/pen/WqjgYL

---

旧答案

这不是 v-card 的问题，v-img。

此行为来自 vuetify.css 库，填充从 24px 变为 16px

.container {
  flex: 1 1 100%;
  margin: auto;
  padding: 24px;
  width: 100%;
}

@media only screen and (max-width: 959px) {
  .container {
    padding: 16px;
  }
}

您可以通过在自己的 css 中将填充覆盖为 24px 来更改此设置

@media only screen and (max-width: 959px) {
  .container {
    padding: 24px;
  }
}

你的代码笔示例https://codepen.io/meabed/pen/WqjgYL