Управление выравниванием-содержанием: пробел между последней строкой

Я стараюсь иметь три элемента гибкости в строке и использовать 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>

ОТВЕТЫ

Ответ 1

Используйте невидимый псевдоэлемент, который занимает последний слот в контейнере:

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

Высота равна 0, так что когда строки заполняются, а псевдоэлемент запускает следующую строку, она не добавляет высоты в контейнер.

Полный код:

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