Html 我正在使用flexbox创建布局，但是，我可以'；t在我的最后一行上正确定位元素。我可以用网格重新创建相同的布局吗？

我有一个宽度不固定的flex容器，里面有一群宽度固定的孩子。我已将

flex wrap

设置为

wrap

，将

内容对齐

设置为

空间均匀

。这在大多数情况下都很好用，但是，最后一行元素的位置并不是我想要的位置

我知道最后一行上的元素之所以位于它们所在的位置，是因为“对齐内容：均匀间隔”。我想知道，当行满时，是否可以将内容均匀地隔开，同时将孩子们保持在div左侧的最后一行。它应该是这样的：

可悲的是，我读到最后一行的目标元素现在实际上不可能使用flexbox，我应该研究其他替代方案。这就是为什么我想知道是否有可能在修复最后一行问题的同时用网格重新创建相同的布局

.cards列表{
填充顶部：20px；
显示器：flex；
柔性包装：包装；
对正内容：空间均匀；
}
.卡片{
宽度：120px；
高度：180像素；
背景色：红色；
边缘底部：10px；
}

---

我通常在使用flex进行网格布局时这样做，因为我需要为

显示：网格。您可以添加与普通卡片具有相同宽度/边距的空网格填充，并将高度设置为0。公式是，在你的卡片行数的基础上减少1个填充，因此4张卡片>3个填充，8张卡片>7个填充。希望一切都清楚

如果不需要回退，可以在下面的示例中使用类
.grid

编辑

在使用Vue时，您可以这样做。请记住，min width只是我接受的一个值，它必须更改它以表示断点。如果你喜欢，你甚至不需要那部分。这只是一个初学者工具包，可以根据您的喜好和项目需要进行修改

<template v-if="window.matchMedia('(min-width: 998px)').matches">
  <div v-for="i of 15" :key="`card-filler-grid-name-${i}`" class="card--filler" />
</template>

我通常在使用flex进行网格布局时这样做，因为我需要为
显示：网格。您可以添加与普通卡片具有相同宽度/边距的空网格填充，并将高度设置为0。公式是，在你的卡片行数的基础上减少1个填充，因此4张卡片>3个填充，8张卡片>7个填充。希望一切都清楚

如果不需要回退，可以在下面的示例中使用类
.grid

编辑

在使用Vue时，您可以这样做。请记住，min width只是我接受的一个值，它必须更改它以表示断点。如果你喜欢，你甚至不需要那部分。这只是一个初学者工具包，可以根据您的喜好和项目需要进行修改

<template v-if="window.matchMedia('(min-width: 998px)').matches">
  <div v-for="i of 15" :key="`card-filler-grid-name-${i}`" class="card--filler" />
</template>

我的解决方案是设置每张卡之间的空间大小，这样卡就会变得灵活。让我们这样做：


.wrapper{
背景颜色：绿色；
宽度：100%；
填充：20px；
显示器：flex；
柔性包装：包装；
框大小：边框框；
}
.项目{
宽度：计算（25%-40px）；/*25%用于4个项目，33%用于3个项目，50%用于2个项目…->减去左右边距*/
利润率：20px；
背景颜色：黄色；
高度：150像素；
框大小：边框框；
}
我的解决方案是设置每张卡之间的空间大小，这样卡就会变得灵活。让我们这样做：


.wrapper{
背景颜色：绿色；
宽度：100%；
填充：20px；
显示器：flex；
柔性包装：包装；
框大小：边框框；
}
.项目{
宽度：计算（25%-40px）；/*25%用于4个项目，33%用于3个项目，50%用于2个项目…->减去左右边距*/
利润率：20px；
背景颜色：黄色；
高度：150像素；
框大小：边框框；
}

感谢您的否决票和对原因的评论。固溶体，否则就接受它看起来很奇怪或移动到网格。仍然需要网格的回退解决方案。。。如果有人需要，我会把它放在这里。糟糕，我已经看到了filler元素解决方案，但是，我应该提到，子元素是使用基于元素数组的JavaScript动态呈现的，所以我不能使用该解决方案。我不需要IE的退路。@Bobimaru为什么会有问题？您正在使用React/Vue/other framework/jQuery吗？只要你知道每行的最大数量，你就可以使用这个。我使用的是Vue.js。我最初显示大约300张卡片，但是，我可以应用过滤器来更改显示的卡片数量。所以有时候我只渲染2张牌，有时候我渲染多达300张。所以我永远不知道这一行是否会被填满。@Bobimaru我的意思是每一行的最大数量是多少？总金额与此无关。如果您的行数显示为4，则添加3个填充符。感谢您的否决票并对原因进行评论。固溶体，否则就接受它看起来很奇怪或移动到网格。仍然需要网格的回退解决方案。。。如果有人需要，我会把它放在这里。糟糕，我已经看到了filler元素解决方案，但是，我应该提到，子元素是使用基于元素数组的JavaScript动态呈现的，所以我不能使用该解决方案。我不需要IE的退路。@Bobimaru为什么会有问题？您正在使用React/Vue/other framework/jQuery吗？只要你知道每行的最大数量，你就可以使用这个。我使用的是Vue.js。我最初显示大约300张卡片，但是，我可以应用过滤器来更改显示的卡片数量。所以有时候我只渲染2张牌，有时候我渲染多达300张。所以我永远也不知道这一排是否会被填满