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

问题描述

概括

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

问题

容器中卡片之间的空间似乎不足sm和 xs 。md从到移动时，您可以看到我的问题sm。这里卡片之间的空间比预期的要大很多另外，我觉得卡片应该在那些模式下的视图中心，就像它在里面md和上面一样。卡片应该在中心，但不是

暂定的

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

代码

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

预期的

我希望v-cardand在and 和as中v-img被相同的空格分开。使用上面的链接在 codepen 中更改浏览器的视图大小以查看您的问题。符合预期的观点。它应该在和中相似xssmmdlgsmxs

标签： vue.jsvuetify.js

更新的答案

您需要在 size <= medium 上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

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

问题描述

解决方案

推荐阅读