允许 flexbox 中的项目与容器的边缘均匀对齐，而无需间隔答案

【问题标题】：Allow items in flexbox to evenly align themselves to container's edges without space-between允许 flexbox 中的项目与容器的边缘均匀对齐，而无需间隔
【发布时间】：2020-09-25 23:55:42
【问题描述】：

对不起，如果这个问题很明显并且我遗漏了一些东西。我正在创建一个站点，该站点具有一个 flexbox 容器，其中包含环绕的元素。我希望容器内的物品伸展到容器的边缘，以确保有正确数量的空白。我可以通过使用 justify-content: space-between 来实现这一点，但是当一行中的项目超过一个且少于四个时，它们仍然必须自己间隔。我该如何解决这个问题？我不想使用 flex-start 并调整项目之间的边距，因为这似乎不准确并且是响应性问题。下面是我的 flex 容器代码。

.clothingitems {
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 100%;
height: 100%;
background: white;
}

.clothingitem {
width: 265px;
height: 450px;
display: flex;
flex-flow: column;
}

有一个实时网站，但请注意我提到的页面没有响应。可以在这里找到：Site here

谢谢。

【问题讨论】：

你也可以添加html并在这里做一个工作示例？

标签： html css layout flexbox

【解决方案1】：

您可以考虑为此使用 CSS 网格，并使用媒体断点使其具有响应性，而不是使用带有 wrap 的水平 flex。这是一个网格示例，每列的宽度占 15%，column-gap 占 5%。

<div class="clothingitems">
  <div class="clothingitem"></div>
  <div class="clothingitem"></div>
  ...
</div>

.clothingitems {
    display: grid;
    grid-template-columns: 15% 15% 15% 15% 15%;
    column-gap: 5%;
    row-gap: 50px;
}

【讨论】：