Mover elementos dentro de un contenedor — CSS: Fundamentos de Flex

• La propiedad flex-wrap
  • nowrap (Valor por defecto)
  • wrap (Permitiendo el salto de línea)
  • wrap-reverse (Saltando de línea, pero en reversa)
• ¿Por qué es importante flex-wrap?

Por defecto, los elementos dentro de un contenedor flexible intentan ajustarse en una sola línea, incluso si se desbordan. Esto puede ser útil para un slider de imágenes, pero problemático en otros casos. Para controlar esto, usamos flex-wrap. 


Mira este ejemplo en el que los elementos intentan ajustarse a una sola línea sin importar si hay espacio suficiente:

Aquí, los elementos se desbordan, permaneciendo en una sola línea. Sin embargo, muchas veces queremos que los elementos salten a una nueva línea cuando sea necesario. Para eso, usamos flex-wrap.

La propiedad flex-wrap

La propiedad flex-wrap controla si los elementos de un contenedor flex pueden saltar a una nueva línea cuando no hay suficiente espacio. Tiene tres valores principales:

nowrap (Valor por defecto)

Este es el comportamiento predeterminado. Los elementos intentarán mantenerse en una misma línea sin importar si hay suficiente espacio o no.

.container {
  display: flex;
  flex-wrap: nowrap; /* No permite saltos de línea */
}

wrap (Permitiendo el salto de línea)

Cuando usamos wrap, los elementos de nuestro contenedor flex saltarán automáticamente a una nueva línea si no hay suficiente espacio.

.container {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos pasen a la línea siguiente */
}

Mira cómo los elementos se acomodan automáticamente en nuevas líneas cuando no hay espacio suficiente:

wrap-reverse (Saltando de línea, pero en reversa)

Este valor funciona de manera similar a wrap, pero coloca las nuevas líneas por encima en lugar de abajo.

.container {
  display: flex;
  flex-wrap: wrap-reverse; /* Los elementos nuevos aparecen arriba */
}

Observa el resultado cuando usamos este valor:

¿Por qué es importante flex-wrap?

El uso de flex-wrap es clave cuando estamos diseñando sitios web adaptables. Nos permite asegurarnos de que los elementos se acomoden de manera ordenada en diferentes tamaños de pantalla, especialmente en dispositivos móviles.

Imagina que estás creando una galería de imágenes o una lista de productos en un ecommerce. Si activamos flex-wrap: wrap;, las tarjetas de los productos pueden distribuirse ordenadamente en varias líneas a medida que disminuye el espacio.

Materiales adicionales

1. Webinar de Códica 🎬 Diseños flexibles con Flexbox