Skip to main content
se añadieron 35 caracteres en el cuerpo
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42
.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  /* Use space-between para mostrar los elementos con el mismo espaciado entre ellos. */
  justify-content: space-between;
  padding: 10px;
}

.item {
  background-color: red;
  height: 40px;
  width: 15%;
  /* Valor con quien jugar */
  line-height: 40px;
  text-align: center;
  margin: 10px;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
</div>
.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  /* Use space-between para mostrar los elementos con el mismo espaciado entre ellos. */
  justify-content: space-between;
  padding: 10px;
}

.item {
  background-color: red;
  height: 40px;
  width: 15%;
  /* Valor con quien jugar */
  line-height: 40px;
  text-align: center;
  margin: 10px;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
</div>
.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  /* Use space-between para mostrar los elementos con el mismo espaciado entre ellos. */
  justify-content: space-between;
  padding: 10px;
}

.item {
  background-color: red;
  height: 40px;
  width: 15%;
  /* Valor con quien jugar */
  line-height: 40px;
  text-align: center;
  margin: 10px;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
</div>
Ejemplo adicional
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42

Ejemplo ordenado

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  padding: 10px;
}

.item {
  background-color: red;
  box-shadow: inset 0 0 0 2px silver;
  height: 40px;
  width: 20%;
  /* 100% / 5 = 20% */
  line-height: 40px;
  text-align: center;
}


/* Responsivo (se puede ajustar las cajas hijos a gusto colores). */

@media screen and (max-width:700px) {
  .item {
    width: 25%;
    /* 100% / 4 = 25% */
  }
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
  <div class="item">13 </div>
  <div class="item">14 </div>

</div>

Ejemplo ordenado

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  padding: 10px;
}

.item {
  background-color: red;
  box-shadow: inset 0 0 0 2px silver;
  height: 40px;
  width: 20%;
  /* 100% / 5 = 20% */
  line-height: 40px;
  text-align: center;
}


/* Responsivo (se puede ajustar las cajas hijos a gusto colores). */

@media screen and (max-width:700px) {
  .item {
    width: 25%;
    /* 100% / 4 = 25% */
  }
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
  <div class="item">13 </div>
  <div class="item">14 </div>

</div>

Mejoría de estructura.
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42

Según tengo entendido quieres mostrar 5 filas en línea y si existen más hijos que te crea una fila nueva alineado a su izquierda. Para ello puedes usar flex-wrap: wrap;, es decir, usa el valor de ajuste para mostrar los elementos en varias filas.

Para centrar tu items podrias usar justify-content: space-between; en tu caja padre .flex, es decir, usa space-between para mostrar los elementos con el mismo espaciado entre ellos.

Un posible ejemplo:

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  /* Use space-between para mostrar los elementos con el mismo espaciado entre ellos. */
  justify-content: space-between;
  padding: 10px;
}

.item {
  background-color: red;
  height: 40px;
  width: 15%;
  /* Valor con quien jugar */
  line-height: 40px;
  text-align: center;
  margin: 10px;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
</div>

También existe una alternativa usando flex: calc(100% / 5); con esto consigues que si existen más cajas, se ajusten automático al ancho total.

Alternativa:

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  padding: 1rem;
}

.item {
  flex: calc(100% / 6);
  background-color: red;
  /* Creamos espacio entre nuestras cajas */
  border: 3px solid silver;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
</div>

Según tengo entendido quieres mostrar 5 filas en línea y si existen más hijos que te crea una fila nueva alineado a su izquierda. Para ello puedes usar flex-wrap: wrap;, es decir, usa el valor de ajuste para mostrar los elementos en varias filas.

Un posible ejemplo:

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  /* Use space-between para mostrar los elementos con el mismo espaciado entre ellos. */
  justify-content: space-between;
  padding: 10px;
}

.item {
  background-color: red;
  height: 40px;
  width: 15%;
  /* Valor con quien jugar */
  line-height: 40px;
  text-align: center;
  margin: 10px;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
</div>

También existe una alternativa usando flex: calc(100% / 5); con esto consigues que si existen más cajas, se ajusten automático al ancho total.

Alternativa:

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  padding: 1rem;
}

.item {
  flex: calc(100% / 6);
  background-color: red;
  /* Creamos espacio entre nuestras cajas */
  border: 3px solid silver;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
</div>

Según tengo entendido quieres mostrar 5 filas en línea y si existen más hijos que te crea una fila nueva alineado a su izquierda. Para ello puedes usar flex-wrap: wrap;, es decir, usa el valor de ajuste para mostrar los elementos en varias filas.

Para centrar tu items podrias usar justify-content: space-between; en tu caja padre .flex, es decir, usa space-between para mostrar los elementos con el mismo espaciado entre ellos.

Un posible ejemplo:

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  /* Use space-between para mostrar los elementos con el mismo espaciado entre ellos. */
  justify-content: space-between;
  padding: 10px;
}

.item {
  background-color: red;
  height: 40px;
  width: 15%;
  /* Valor con quien jugar */
  line-height: 40px;
  text-align: center;
  margin: 10px;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
</div>

También existe una alternativa usando flex: calc(100% / 5); con esto consigues que si existen más cajas, se ajusten automático al ancho total.

Alternativa:

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  padding: 1rem;
}

.item {
  flex: calc(100% / 6);
  background-color: red;
  /* Creamos espacio entre nuestras cajas */
  border: 3px solid silver;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
</div>

Mejoría de estructura.
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42
Loading
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42
Loading