En este post, te presentamos algunas propiedades recientemente añadidas al sistema Flexbox: las propiedades de espaciados en Flexbox.
Este es un sistema de disposición de elementos muy poderoso que entró en el mundo del desarrollo web en 2009. Aunque se trata de un sistema relativamente nuevo, ha demostrado que ofrece muchas ventajas para los diseñadores web y que es de gran utilidad para crear diseños complejos.
Propiedades de espaciados en Flexbox
Existen tres propiedades de espaciados en Flexbox, también conocidas como las propiedades gap. El término gap flex se traduce como brecha en español y, en este conjunto de propiedades, se refiere al espacio entre los elementos HTML de un contenedor.
A diferencia de las propiedades justify-content o align-content de Flexbox, esta propiedad se concentra solamente en el espacio entre lo elementos. Esto quiere decir que no controla su relación con los bordes del contenedor.
Es importante tener en cuenta que las propiedades de espaciados en Flexbox se han añadido al sistema de forma reciente, por lo que algunos navegadores todavía no las soportan. Te recomendamos ir a la página web CanIUse para revisar el soporte de cada navegador con esta propiedad.
Aunque se pierden pocos navegadores, siempre es bueno que revises la compatibilidad de nuevas propiedades antes de implementarlas a tu proyecto.
A continuación te presentamos las tres propiedades de espaciados en Flexbox o espacio entre elementos flex:
row-gap
Esta propiedad nos ayuda a determinar los espacios o brechas entre las filas de elementos. Podemos determinar este espacio usando cualquiera de las unidades de medida de CSS, ya sea con píxeles, porcentajes o unidades relativas. Al darle un valor a esta propiedad, estamos definiendo el espacio vertical entre los elementos. Ten en cuenta que las propiedades de espaciados en Flexbox deben tener un valor positivo.
column-gap
Esta propiedad es la contraparte de row-gap. Como su nombre indica, nos ayuda a determinar los espacios o brechas entre las columnas de elementos. Esto quiere decir que definimos el espacio horizontal entre los elementos o columnas de elementos.
gap
La propiedad gap es una abreviatura para las otras dos propiedades de espaciados en Flexbox. Así como flex-flow es una abreviatura para unir las propiedades flex-direction y flex-wrap en una sola etiqueta, la propiedad gap nos permite determinar los valores de row-gap y column-gap en una sola línea de código del flex espacio entre elementos. Entonces, basta con que escribamos los dos valores que queremos en esta propiedad: el primer valor será el row-gap y el segundo valor será el column-gap.
Además de estos valores, la propiedad gap puede tener las siguientes opciones:
- normal: esta es la opción por defecto, la cual determinará un valor de 0px para los espacios entre columnas y filas.
- initial: aplica el valor por defecto.
- inherit: esta opción hereda los valores de espaciados de sus elementos padre.
- unset: esta opción remueve los espaciados del elemento.
Si todavía tienes algunas dudas sobre cómo funcionan estas propiedades de espaciados en Flexbox, te invitamos a jugar con los códigos y pruebas de este artículo de CSS-Tricks.
Después de leer este post, ya sabes cómo funcionan las propiedades de espaciados en Flexbox y estás preparado para empezar a diseñar la disposición de los elementos de tu propia página web. Para profundizar en el tema, es tan importante continuar aprendiendo como poner cada conocimiento nuevo en práctica.
Por este motivo, si quieres convertirte en un experto en pocos meses, no puedes perderte nuestro Bootcamp en Desarrollo Web Full Stack. Con un método de aprendizaje que combina la teoría con la práctica, no solo seguirás aprender los lenguajes de programación más importantes del desarrollo web, sino que también los usarás para crear y diseñar tu propia página web. ¿A qué estás esperando para unirte? ¡Matricúlate!
