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

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

высота 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>