0

Tengo un problema con la propiedad flex en css: le estoy dando un valor de justify-content: flex-start para ordenar mis elementos HTML, el problema consiste en que ese número de elementos puede aumentar como disminuir, y cuando aumentan los elementos se van quedando los elementos cada vez más pequeños hasta deformarse mi maquetación.

¿Hay alguna forma de que una vez haya cierta cantidad de elementos, los demás elementos bajen a la segunda línea o segundo bloque?

1
  • ¿Puedes compartir tu código? Gracias.
    – user128841
    Commented el 17 jun. 2019 a las 23:12

2 respuestas 2

2

Solo necesitas flex-flow: wrap;

section{
  width: 100%;
  height: 170px;
  background-color: #c3c3c3;
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
  align-items: start;
  padding: 5px;
  
}

div {
  width: 70px;
  height: 70px;
  background-color: #333;
  text-align: center;
  color: #fff;
  margin: 5px;
}
<section>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
</section>

Este lo que hace es decir como se van a componer los elementos hijos, puede ver mas sobre esto aqui

3
  • Me funciono! Me puedes explicar como funciona flex-flow: wrap; por favor. Commented el 17 jun. 2019 a las 23:49
  • Recuerda siempre agregar una explicación a tu código para que la calidad de tu aporte mejore y ayude a mas gente
    – user128299
    Commented el 17 jun. 2019 a las 23:53
  • Listo, editado un poco. Commented el 18 jun. 2019 a las 1:11
0

Cuando agregas la propiedad display con valor flex, hay dos estilos que se definen por defecto: flex-direction: row y flex-wrap: nowrap. Lo único que debes hacer es cambiar el valor de la propiedad flex-wrap a wrap y asegurarte que el valor deflex-direction sea row.

Hay una propiedad shortland llamada flex-flow, en la que puedes unir valores tanto de flex-direction como de flex-wrap, de la siguiente forma: flex-flow: row wrap.

Te dejo un sitio que me ha ayudado a comprender el uso de la tecnología flexbox en CSS.

2
  • Falso: la propiedad flex-direction tiene como valor por defecto row, de hecho lo explican en el mismo sitio que consideras «buenísimo».
    – Shaz
    Commented el 17 jun. 2019 a las 23:27
  • Tienes razón, rectifico mi respuesta.
    – user128841
    Commented el 17 jun. 2019 a las 23:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.