如何在v-flex中居中放置v-img和v卡？

Question

摘要

我正试图以正方形形状（）连续显示一些专辑图片，如下面的codepen 。不幸的是，我遇到一个问题。当我的浏览器中的视图大小改变时，图片应以相等的间距分开，但是当视图似乎位于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卡v-img的问题。

此行为来自vuetify.css lib，填充从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;
  }
}

您的Codepen示例https://codepen.io/meabed/pen/WqjgYL