Vue.js 如何在v-flex中居中放置v-img和v-card？

总结

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

问题

容器中卡之间的空间似乎缺少sm和xs。当从md移动到sm时，您可以看到我的问题。此外，我觉得在这些模式下，卡应该位于视图的中心，就像在md和upper中一样。

试探性

我试图用xs{size}设置我的v-flex，但是当我在浏览器中更改视图大小时，v-card彼此重叠

代码

期望

我希望v-card和v-img在xs和sm中与md和lg的空间相同。使用上面的链接在codepen中更改浏览器的视图大小，以查看您的问题

更新的答案

---

您需要v-flex在大小上具有flex-grow-0属性，我不确定我是否理解。链接中是否存在问题？如果没有，你能发布代码的具体更改来重现这个问题吗？我很不清楚，所以我澄清了我的问题。我添加图片以更清晰。我更新我的问题以更清晰。这不是我问题的重点，但我不知道。以后可能有用！谢谢明白了：我已经更新了答案和密码笔：-我想它的工作原理和你期望的一样！您需要不在父div flex上生长

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

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

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