html - react - Administrar justify-content: space-between en la última fila

space between content css

Question

Esta pregunta ya tiene una respuesta aquí:

• Ajustar y alinear correctamente los elementos flexibles en la última fila 1 respuesta
• Orientación de elementos flexibles en la última fila 1 respuesta

Mi objetivo es tener tres elementos flexibles por fila y usar space-between para que el primer y el tercer elemento de cada fila toquen el exterior del contenedor pero permanezcan equidistantes.

Esto funciona según lo previsto, pero los problemas surgen en la segunda fila cuando el quinto elemento no se alinea como quiero, directamente debajo del segundo elemento. Tendré una cantidad variable de contenido, así que necesito que el diseño funcione con cualquier cantidad de cuadros.

He mostrado mi código a continuación. ¿Alguien puede decirme cómo arreglar esto?

.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

Use un pseudo-elemento invisible que ocupe la última ranura en el contenedor:

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

La altura es 0, de modo que cuando las filas se llenan y el pseudo-elemento comienza la siguiente línea, no agrega altura al contenedor.

Código completo:

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