No siempre sabemos cuál será el tamaño ideal para nuestros elementos. Muchas veces esto depende de los otros elementos a su alrededor, mientras que, en otras ocasiones, depende del tamaño de la pantalla. Por ello, muchos diseñadores web prefieren crear tamaños relativos o adaptables que se adapten automáticamente a las necesidades de la página web. En este post, te enseñaremos cómo utilizar las propiedades flex-grow y flex-shrink de Flexbox para hacer que tus elementos cambien de tamaño automáticamente.
La propiedad flex-grow
Aunque las propiedades flex-grow y flex-shrink de Flexbox nos permiten modificar el tamaño de los elementos HTML automáticamente, tienen características distintas. La propiedad flex-grow nos permite insertarle a un elemento la habilidad de crecer en el espacio si es necesario. Al insertar esta propiedad, los elementos ocuparán el espacio sobrante de su contenedor.
Para insertar la propiedad flex-grow a un elemento HTML, basta con que le demos un valor sin unidad de medida. Este valor realmente nos indica la proporción en la que debe crecer el elemento. Por defecto, todos los elementos tienen un valor de 0, lo cual determina que no tienen la habilidad de crecer. Si insertamos cualquier otro valor en esta propiedad, el elemento crecerá. Si tienes, por ejemplo, cinco elementos en un contenedor al que le sobra espacio y le das la propiedad flex-grow a uno de ellos, este ocupará la totalidad del espacio que sobra.
Pero ¿qué pasa si hay más de un elemento con la propiedad flex-grow? En este caso, si los elementos tienen el mismo valor en la propiedad, se repartirán el espacio de manera que todos los elementos crezcan lo mismo. Sin embargo, si los elementos tienen valores distintos, estos valores representarán partes del espacio sobrante. Entonces, si hay un elemento con un valor 2 y otro con un valor 1, el espacio sobrante se dividirá en tres partes, dos de ellas se aplicarán al crecimiento del primer elemento y una al crecimiento del último elemento.
Ya que flex-grow hace que los elementos crezcan para ocupar el espacio sobrante en su contenedor de manera proporcional, esta propiedad hace que los elementos ignoren el tamaño que se les ha definido en las propiedades width y height. Sin embargo, todavía puedes ver este valor en el inspector de tu navegador. Al clicar sobre un elemento en el inspector, podrás ver que unas rayas diagonales ocupan parte del elemento y una raya horizontal o vertical ocupa el resto. Las rayas diagonales representan el tamaño original, mientras que la raya horizontal o vertical representa el crecimiento o la compresión del elemento.
La propiedad flex-shrink
Las propiedades flex-grow y flex-shrink de Flexbox tienen funciones directamente opuestas. Mientras que flex-grow determina el crecimiento de un elemento en un espacio sobrante, la propiedad flex-shrink determina cuánto se debe comprimir un elemento cuando no hay suficiente espacio.
El valor por defecto de esta propiedad es 1. Al aplicar otro valor a flex-shrink, le estamos diciendo al navegador que comprima ese número de veces más que los demás elementos. Si, por ejemplo, todos los elementos comprimen 5px, un elemento con flex-shrink:2 se comprimirá 10px y un elemento con flex-shrink:5 se comprimirá 25px.
Puedes unir las propiedades flex-grow y flex-shrink de Flexbox usando la abreviatura flex. Conoce más de esta abreviatura en esta guía completa de Flexbox.
¿Cómo seguir?
Ahora que sabes cómo hacer que tus elementos cambien de tamaño automáticamente, encogiéndose o creciendo para acomodarse al espacio, ¡es hora de aplicar este conocimiento a tu propia página web! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Además de continuar aprendiendo, usarás los nuevos conocimientos para crear y diseñar tu propia página web con diseño responsive. Al finalizar, serás un experto en diseñar páginas web útiles, flexibles y amigables con el usuario. ¡Matricúlate ya!
