Flexbox es un sistema de disposición de elementos relativamente nuevo que nos permite situar los elementos en nuestra página web de una manera más cómoda y rápida que el posicionamiento clásico. En este post, te presentamos su función principal: la propiedad flex-direction de Flexbox.
En el sistema de disposición de elementos Flexbox hay dos tipos de propiedades disponibles: aquellas que afectan al contenedor (flex container) y aquellas que afectan a los hijos de este contenedor (flex items). En general, las propiedades que afectan a los contenedores tienden a ser heredadas por los hijos. Sin embargo, una propiedad insertada a un hijo puede sobrescribir la regla del padre. Si quieres conocer qué propiedades afectan a qué elemento, te invitamos a revisar esta guía completa de Flexbox.
Recuerda que, siempre que quieras usar el sistema Flexbox, debes agregar la propiedad display:flex a tu contenedor. Esta propiedad le dice al navegador que el elemento seguirá las reglas de Flexbox para situarse.
¿Qué hace la propiedad flex-direction de Flexbox?
La propiedad flex-direction de Flexbox forma parte de las propiedades que nos permiten modificar los contenedores o flex container. Como puedes ver más en profundidad en nuestro post sobre el posicionamiento avanzado con Flexbox, este sistema de disposición de elementos no habla en términos de eje y o eje x, sino en términos de eje principal y eje transversal.
La propiedad flex-direction de Flexbox nos permite determinar cuál es el eje principal de nuestro contenedor para, de esta forma, poder jugar con la dirección de los elementos o flex items dentro del contenedor.
En principio, Flexbox es un sistema de disposición de elementos de una sola dirección. Por lo tanto, es útil que pensemos que nuestros elementos se dispondrán en filas horizontales o en columnas verticales. Si tomamos estas dos opciones como punto de partida, nos encontramos con cuatro posibles direcciones de un contenedor.
- row: esta opción determina que los elementos se ordenarán de izquierda a derecha.
- row-reverse: esta opción quiere decir que los elementos se ordenarán de derecha a izquierda.
- column: esta opción define que los elementos se ordenarán de arriba abajo.
- column-reverse: esta opción le dice al navegador que los elementos se ordenarán de abajo arriba.
Puedes ver cómo funciona esta propiedad en tus elementos directamente desde el inspector del navegador. Con solo darle clic a la etiqueta flex en la barra de elementos del inspector, el mismo navegador crea un borde que selecciona el contenedor y le da rayas al espacio en blanco.
Además, crea un borde punteado para cada elemento, permitiéndote analizar en qué elemento se está generando el estilo. Pero lo que es aún más interesante de la compatibilidad entre Flexbox y el inspector es que puedes transformar la dirección de tus elementos directamente desde la sección de estilos del inspector. Basta con solo un clic sobre el icono de flex para elegir entre columnas y filas en la propiedad flex-direction de Flexbox.
Ahora que has tenido esta introducción a la propiedad flex-direction de Flexbox, estamos seguros de que no ves la hora de seguir aprendiendo sobre todas las posibilidades que este sistema tiene a tu disposición. En KeepCoding sabemos que, con cada post que lees sobre desarrollo web, crecen tus ganas de aprender. Por ello, te recomendamos echarle un vistazo a nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. Allí continuarás aprendiendo, entre muchas otras cosas, sobre los lenguajes de programación para el desarrollo web. En pocos meses, serás un experto en este ámbito del sector IT y podrás cumplir tu sueño de ser un desarrollador web profesional. ¡Anímate a solicitar más información e inscríbete ya!
