验证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。

它在项目之间分配了可用空间。

由于每行中的项目数不同，因此可用空间也会变化，从而导致分布不均。