justify-contentの管理：最後の行の間のスペース

Question

私は行ごとに3つのフレックスアイテムを用意し、space-betweenを使用することを目指しているので、各行の最初と3番目のアイテムはコンテナの外側に接触します。

これは意図したとおりに動作しますが、2番目の行の5番目の項目が、2番目の項目のすぐ下に、必要に応じて揃っていない場合に問題が発生します。私はさまざまな量のコンテンツを用意していますので、任意の数のボックスで作業するレイアウトが必要です。

私は以下のコードを示しました。誰も私にこれを修正する方法を教えてもらえますか？

.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

容器内の最後のスロットを占有不可視擬似要素を使用：高さが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: ""; 
 
}

<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>