CSS

Entendiendo la utilización de Flexbox

En un artículo anterior te mostramos una breve introducción a Flexbox, esta herramienta de desarrollo nativa de CSS y que se encuentra disponible en una amplia gama de navegadores utilizados hoy en día.

En este nuevo artículo te mostraremos ciertos aspectos necesarios para entender el funcionamiento y la lógica detrás de Flexbox, y de qué manera se aplican dichos estilos dentro de nuestro desarrollo.

Conceptos

Para entender un poco el orden y trama que utilizarán los contenidos cuyo contenedor utilizan Flexbox es necesario tener en cuenta ciertos conceptos básicos. Flexbox permite manejar el contenido en una sola dimensión a la vez, es decir, ya sea como filas o columnas, dándole la propiedad de unidemensional, a diferencia de un modelo bidimensional como podría ser CSS Grid.

Cada vez que utilizamos Flexbox para ordenar nuestro contenido lo realizamos mediante el manejo de un eje principal y un eje cruzado (vertical u horizontal).

Entender cada eje resulta sencillo, si nos guiamos por el comportamiento de un plano cartesiano, en donde el eje principal tendrá el comportamiento de un eje X, es decir: se moverá de izquierda a derecha o de izquierda a derecha. En cuanto al eje cruzado se moverá de manera perpendicular al eje principal, es decir desde arriba hacia abajo o desde abajo hacia arriba. Cabe destacar que el comportamiento de cada eje depende de la dirección que otorguemos al contenedor.

Dichas direcciones establecidas por Flexbox son: Orden por fila (junto con su orden inverso de fila) y un orden mediante columnas (más su orden inverso de columnas).

A la hora de establecer este orden dentro de nuestro contenido lo realizamos utilizando el atributo flex-direction.

row o row-reverse

Esta es la dirección natural proporcionada por Flexbox, en donde cada contenido del elemento inicia desde su izquierda a la derecha, es decir dentro de la fila de contenido.

Eje principal:

Al utilizar este tipo de ordenamiento el eje principal del contenedor realizará su recorrido a lo largo de la fila, es decir de izquierda a derecha para la dirección row, o de derecha a izquierda en el caso de row-reverse, siendo esta su trama natural.

Eje cruzado:

Para el caso del eje cruzado este realizará su recorrido de manera perpendicular al eje principal, es decir, cuando el eje principal realiza su recorrido a lo largo de la fila el eje cruzado realizará su recorrido a lo largo de las columnas, desde arriba hacia abajo en el caso de utilizar row, o desde abajo hacia arriba en el caso de utilizar row-reverse.

column o column-reverse

Eje principal:

Al utilizar el orden por columnas el contenedor realizará su recorrido en forma vertical, es decir, el eje principal se moverá desde arriba hacia abajo en caso de utilizar la dirección column, y desde abajo hacia arriba en caso de utilizar el ordenamiento column-reverse.

Eje cruzado:

Para el caso del eje cruzado este realizará su recorrido de manera perpendicular al eje principal, es decir, cuando el eje principal realiza su recorrido a lo largo de la fila el eje cruzado realizará su recorrido a lo largo de las filas, desde arriba hacia abajo en el caso de utilizar row, o desde abajo hacia arriba en el caso de utilizar row-reverse.

Inicio y fin

Flexbox propone un nuevo enfoque en cuanto a la disposición de elementos y la manera en que estos son leídos y/o alineados dentro de un contenedor. Es por esto que para entender el funcionamiento de Flexbox debemos tener en cuenta la manera en que este se refiere a los extremos de nuestro contenedor, en donde estos son denominados como inicio y final (start y end, respectivamente).

Al momento de definir un inicio y un final dependerá netamente del tipo de orden que le otorgamos al contenedor, y estos se regirán de acuerdo a dicho tramado.

row y row-reverse

Al definir una dirección por defecto como lo es row este tendrá como inicio y final el primer y último contenido de dicho contenedor, es decir desde la izquierda a la derecha.

En cuanto a una dirección row-reverse este poseerá como inicio y final el primer y último contenido del contenedor, lo que se  traduce como resultado a una lectura desde derecha a izquierda.

column y column-reverse

En el caso de poseer un direccionamiento de columna tanto inicio como final corresponderán a arriba o abajo, dependiendo si la dirección es realizada utilizando el valor column.

Tal como sucede con el orden mediante filas el valor inverso de column volteará tanto inicio como final dentro del contenedor, es decir este se realizará desde abajo hacia arriba.

Flex flow

El atributo flex-flow nos permitirá combinar dos propiedades nativas de Flexbox, las cuales son flex-direction y flex-wrap.

Tal como mencionamos anteriormente flex-direction nos permite indicar en qué dirección se dispondrán nuestros contenidos, en donde sus posibles valores serán row, row-reverse, column y column-reverse.

En cuanto a la propiedad flex-wrap nos permitirá establecer si estos contenido poseen un quiebre, lo que se traduce en utilizar más de una fila dentro de la organización de nuestros contenidos dependiendo del ancho de cada uno de ellos.

nowrap (default)

Este es el valor por defecto otorgado por Flexbox, en donde organiza sus elementos al ancho máximo de cada uno de ellos con tal de ser visualizado desde una sola fila.

wrap

Al aplicar wrap a esta propiedad los contenidos adoptaran el ancho especificados dentro del estilo, ocupando la cantidad necesarias de filas de acuerdo al total de contenidos.

Actualmente, Flexbox es candidato a recomendación en W3C y no debemos menospreciar su importancia en un contexto de multiplicidad de dispositivos y visualizaciones.