管理理由内容：最后一行之间的间隔

Question

我的目标是每行使用三个伸缩项目，space-between以便每行的第一和第三项目接触容器的外部，但保持相等的间距。

这可以按预期工作，但是当第五项未按我的要求对齐时，在第二行的第二行出现了问题。我将拥有可变数量的内容，因此需要布局可与任意数量的盒子配合使用。

我在下面显示了我的代码。谁能告诉我该如何解决？

.main{
    background: #999;
    margin:0 auto;
    width:1300px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.box{
    background: #7ab9d7;
    color: #555;
    height: 300px;
    width: 30%;
    margin-bottom: 30px;
    text-align: center;
    font-size: 30px;
    padding-top: 120px;
}

<div class="main">
         
          <div class="box">1</div>
          <div class="box">2</div>
          <div class="box">3</div>
          <div class="box">4</div>
          <div class="box">5</div>
         
</div>

Answer 1

使用占据容器中最后一个插槽的不可见伪元素：

.main::after {
  height: 0;
  width: 30%;
  content: "";
}

height为0，因此当行被填充时，伪元素开始下一行时，它不会增加容器的高度。

完整代码：

.main::after {
  height: 0;
  width: 30%;
  content: "";
}

.main {
  background: #999;
  margin: 0 auto;
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  background: #7ab9d7;
  color: #555;
  height: 30px;
  width: 30%;
  margin-bottom: 30px;
  text-align: center;
  font-size: 30px;
  padding-top: 120px;
}
.main::after {
  height: 0;
  width: 30%;
  content: "";
}