如何解决验证flexbox物品不能彼此直接包裹
我想在Flexbox中显示许多卡。
不幸的是,某些浏览器窗口尺寸的项目无法正确包装。示例:
我的代码:
<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
?
解决方法
您需要从flex-grow: 1
中删除.col
。
它在项目之间分配了可用空间。
由于每行中的项目数不同,因此可用空间也会变化,从而导致分布不均。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。