Flexbox es un sistema de disposición de elementos introducido al mundo del desarrollo web en 2009. Este sistema nos permite ubicar los elementos de una página web de una manera más cómoda y rápida que el posicionamiento clásico de CSS. En este post, te presentamos una de sus funciones principales: la propiedad flex-wrap de Flexbox o wrap en CSS.
¿Cómo funciona la propiedad flex-wrap de Flexbox?
La propiedad flex-wrap de Flexbox afecta la forma en la que se comporta un contenedor o flex container y los elementos dentro de este, también conocidos como flex items. Normalmente, los elementos de un contenedor intentarán ordenarse de manera que ocupen solamente una línea (el ancho del contenedor).
Si tenemos, por ejemplo, cinco elementos iguales en un viewport con un ancho de 1000px, los elementos con un ancho de 100px ocuparán solo media pantalla. Sin embargo, cuando les damos un ancho mayor al ancho de la pantalla, por ejemplo de 300px, los elementos no se transforman a este ancho. Como la suma de sus anchos es mayor al ancho de la pantalla, los elementos ignoran su ancho y se reparten el espacio horizontal del viewport, manteniéndose en una sola línea, gracias al flex-wrap.
La propiedad flex-wrap de Flexbox o flexbox wrap. nos permite sobrescribir este comportamiento automático y definir qué deben hacer los elementos de un contenedor cuando no caben en una sola línea. Por defecto, esta propiedad tiene la opción nowrap, la cual funciona como la opción auto de otras propiedades. Esto quiere decir que esta opción sigue el comportamiento habitual de los elementos y no lo modifica.
La otra opción de la propiedad flex-wrap de Flexbox es wrap. Esta opción hace que los elementos apliquen el tamaño que le hemos dado y se acomoden en el eje transversal en vez de en una sola línea. Es decir, si tenemos nuestros cinco elementos de 300px de ancho, con la opción wrap van a aceptar este ancho. Como nuestra pantalla mide 1000px, solo tres de los elementos con el ancho completo caben en una sola línea, por lo que los demás se dispondrán abajo, siguiendo el sentido transversal automático, que es el vertical. Si estás un poco perdido con qué es el sentido transversal, te invitamos a leer nuestro post sobre la propiedad flex-direction de Flexbox.
Ten en cuenta que, si cambias tu propiedad flex-direction del flex-wrap a la opción column, harás que el sentido transversal sea horizontal.
Sin embargo, los elementos no continuarán en el siguiente espacio horizontal, sino que seguirán creciendo en el espacio vertical. Esto se debe a que la web está diseñada para crecer infinitamente en sentido vertical añadiendo una barra de scroll para seguir bajando. Así que, si quieres que tus elementos se acomoden al espacio horizontal sobrante, tendrás que darle un alto máximo al contenedor en el que están, pues el viewport no lo tiene.
Para conocer más sobre las distintas propiedades de este sistema, te invitamos a revisar esta guía completa de Flexbox, donde encontrarás más conceptos relacionados al flex-wrap, wrap en css o flexbox wrap.
Ahora que sabes cómo utilizar la propiedad flex-wrap de Flexbox o flexbox wrap para modificar la forma en la que tus elementos se acomodan al espacio de la pantalla, ¡es hora de que apliques esta propiedad en el diseño de tu propia página web! En KeepCoding sabemos que cada pedazo de teoría que lees te motiva no solo a seguir aprendiendo sobre desarrollo web, sino también a crear y diseñar tus propias líneas de código con wrap en css. Por eso, ¡tenemos el bootcamp intensivo perfecto para ti!
Al inscribirte a nuestro Desarrollo Web Full Stack Bootcamp aprenderás sobre CSS y HTML y usarás estos conocimientos para crear y diseñar tu propia página web con ayuda de nuestros profesores. ¡No te lo pierdas!
