Managing Justify-content: Space-between On Last Row

I am aiming to have three flex items per row and use space-between so the first and third items in each row touch the outside of the container but remain equally spaced. This works

Solution 1:

Use an invisible pseudo-element that occupies the last slot in the container:

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

The height is 0 so that when rows are filled, and the pseudo-element starts the next line, it doesn't add height to the container.

Full code:

.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: "";
}

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