html - 显示 flex - 将网格元素推向左侧，同时保持网格元素之间的空间

Question

我有一个使用 flex 的简单网格。工作正常，但我的问题是，当没有足够的元素来容纳该行时，它将元素间隔到边缘。

例如，当我有一行每行容纳 3 个元素并且总共有 5 个元素时，底行的两个元素将位于边缘，中间有一个间隙。

这是我的代码:

.grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid div {
  flex-basis: 26%;
  height: 50px;
  background-color: red;
  margin-bottom: 20px;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

如您所见，底行有一个间隙。是否有一种 Flex 方法可以将所有内容推到左侧，同时保持 justify-content: space-between ？

我可以给除第 n 个 child 3n 之外的所有东西留出 margin ，但我想知道是否有更好的灵活方法来做到这一点。

Answer 1

解决方案是添加一个伪元素，使其表现得与其他元素类似，这样总共就有 6 个伪元素。

.grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid div {
  flex-basis: 26%;
  height: 50px;
  background-color: red;
  margin-bottom: 20px;
}
.grid:after {
flex-basis: 26%;
  content:"";
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

即使您最初有 6 个元素，这也不是问题，因为伪元素没有高度，因此它不会创建第三行。因此，无论最后一行中有多少元素(1,2 或 3)，它总是有效:

.grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border:1px solid green;
}

.grid div {
  flex-basis: 26%;
  height: 50px;
  background-color: red;
  margin-bottom: 20px;
}
.grid:after {
flex-basis: 26%;
  content:"";
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>