显示flex - 将网格项目向左推，同时保持空间

Question

您好我有一个使用flex的简单网格。工作得很好但我的问题是当没有足够的元素来适应行时，它会将元素分隔到边缘。

例如，当我有一行可以容纳每行3个项目并且总共有5个项目时，底行将在边缘上有两个元素，中间有一个间隙。

继承我的代码：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，底行中有一个间隙。是否有灵活方法将所有内容都向左推，同时保留justify-content: space-between？

我可以给予除了nn孩子3n以外的一切保证金，但我想知道是否有更好的灵活方式去做。

谢谢！

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>