Cómo utilizar Flexbox con Tailwind CSS - Parte 1

Cada día, más y más frameworks o bibliotecas surgen para mejorar la calidad de vida del programador. Con el objetivo de facilitar y simplificar las implementaciones, muchos alcanzan una visibilidad tan gigantesca que resulta difícil insertarlos en un determinado medio sin haber al menos escuchado algo o a alguien mencionar sus nombres. Este es el caso de Tailwind CSS.

Creado con la intención de ser una forma más práctica de aplicar estilos CSS en un proyecto determinado, Tailwind fue adoptado por la comunidad y hoy es utilizado por muchas personas. Con el objetivo de acercar un poco más a nuestros estimados lectores las increíbles hazañas que este framework puede brindarnos, en este artículo desentrañaremos algunos atributos dirigidos a Flexbox, un concepto esencial para el estilo CSS.

Un poco más sobre Tailwind CSS

Como ya se mencionó, Tailwind es un framework creado con el objetivo de optimizar el uso de CSS. En lugar de que la estilización se realice por classes creadas manualmente por el programador (donde sus atributos se definen en un archivo importado con extensión .css), este framework habilita un conjunto de clases concebidas en el modelo Atomic css, donde cada una posee una función única, como por ejemplo cambiar el color del background de un elemento negro o transformar o tu texto a bold.

Todo este conjunto de clases puede encontrarse en la documentación de Tailwind CSS e incluso si ninguno de ellos coincide con tus necesidades, ¡también puedes crear uno nuevo!

Enfocado en el desarrollo mobile-first, toda la estilización se acelera y optimiza con Tailwind que, además de ser autointuitivo, posee una documentación de fácil aprendizaje y búsqueda rápida: basta colocar el nombre del atributo (como por ejemplo font-size, font-weight o text-decoration) que esté disponible el nombre de la clase que satisface la demanda y cómo utilizarla.

¿Qué es Flexbox?

El Flexible Box Module (o Flexbox) es un modelo de layout creado con el objetivo de proporcionar diversas funcionalidades centradas en la alineación y organización espacial de elementos.

A través de él podemos definir ajustes esenciales para el estilo CSS de una página, como organizar elementos horizontal o verticalmente, centrar el contenido de un elemento o alinearlo con uno de los lados derecho o izquierdo, etc. Sin lugar a dudas, un buen usuario de CSS entiende estos detalles y utiliza Flexbox a cada momento en su implementación.

¡Tailwind CSS es para todos!

Existen diversas formas de instalar Tailwind CSS en tu proyecto y en la documentación de éste hay una guía práctica para cada situación. ¡Basta seguir el paso a paso específico para tu situación y ser feliz!

Una mirada más a fondo a Flexbox

Para practicar el uso de Flexbox, crearemos algo simple. Tendremos un container principal que poseerá otros tres containers. Dentro de cada uno habrá un párrafo con un texto, indicando un nombre para cada ítem. Utilizaremos algunas clases de Tailwind en esta fase, todas ellas debidamente explicadas:

En el container (div) principal, utilizamos tres clases para estilización: bg-black, w-full, h-screen y p-2. Con eso indicamos, respectivamente, que queremos que el color del background de nuestra página sea negro, el ancho del 100 %, la altura del 100 % de la altura del viewport (o sea, 100 % de la pantalla disponible para visualización) y el espaciado interno sea de 8 px.

Dentro de este container principal hay otros tres, donde indicamos en sus clases colores de background diferentes para cada uno. También definimos un margen externo de 8 px (m-2), una altura de 80 px (h-20) e un ancho de 160 px (w-40).

Finalmente, tenemos el párrafo con las clases p-4, m-1,  font-bold y text-xl. Informamos, respectivamente, que el espaciado interno de cada párrafo será de 16 px, el externo será de 4 px, el peso de la fuente será 700 y el tamaño del texto será 20 px. Como puedes ver, existen varios estilos css que solemos utilizar en el día a día, cada uno dividido en una clase Tailwind.

Imagina que quieres alinear estos bloques horizontalmente en lugar de verticalmente, como están en la figura 3. La clase flex nos ayudará con eso.

Por patrón, el uso de la clase flex define que la dirección en la que los ítems de un elemento deben organizarse será horizontal. Podemos definir estos términos manualmente con flex-row (que ya viene por defecto si no usamos ninguna de las dos clases que definen la dirección) y flex-col (que organiza los ítems verticalmente).

Bien, ya entendimos que la clase flex sierve para definir la forma como los elementos se organizan. Pero ¿cómo definimos la posición de los ítems de un container según la forma que queremos? ¿Y si quisiéramos que en lugar de estar al inicio del eje, estuvieran al centro?

Antes de todo, remueve la clase flex-col, como en la figura 4, para definir una organización horizontal de los elementos. Ahora, insertamos en el container principal la clase justify-center. Cuando utilizamos la organización en la dirección horizontal (flex-row), justify-center alinea todos los ítems al centro en relación con el eje x. Cuando utilizamos una organización en dirección vertical, justify-center alinea todos los ítems al centro en relación con el eje y.

Es importante destacar que, así como el atributo justify-content posee diversas formas de alineación, Tailwind también habilita una clase para cada una de ellas:

• Justify-start alinea los elementos con el inicio del eje principal del elemento:
  
• Justify-end define la alineación de los elementos hacia el fin del eje principal del elemento:
  

• Justify-between define la alineación de forma que haya un espacio igual entre los elementos:
  

• Justify-around alinea los elementos contenidos, de forma que haya un espacio igual de cada lado de cada ítem:
  
• Justify-evenly alinea los elementos contenidos dentro del elemento de forma que haya un espacio igual de cada lado de cada ítem, aunque también considerando la duplicación del espacio que generalmente existiría al utilizar justify-around:
  

Pero, ¿qué pasa si queremos alinear un elemento con el centro en relación tanto con el eje horizontal como con el vertical? En ese caso, ingresaremos a otro conjunto de clases de Tailwind, donde usaremos la llamada items-center:

Mientras que las clases que comienzan con justify aquí presentadas alinean los ítems en relaciónm con el eje en el que están posicionadas (alineación vertical para dirección vertical y alineación horizontal para dirección horizontal), las clases items hacen lo opuesto: alineación horizontal en relación con la dirección vertical y alineación vertical en relación a la dirección horizontal:

• La clase items-stretch estira los artículos para que ocupen todo el eje transversal. Es el valor predeterminado si no hay clase items que fuera repasada en un elemento y, para ver la consecuencia de utilizar esta clase, basta remover la altura y anchura de los tres containers internos:
  

• La clase items-start alinea los ítems al inicio del eje transversal:
  

• La clase items-end alinea los elementos al fin del eje transversal:
  

• La clase items-baseline organiza los elementos para que su base quede alineada, independientemente del tamaño de cada elemento (crea diferentes espaciados internos y externos para cada uno de los bloques para llegar al resultado de la figura 19):
  

Consideraciones finales

Si exploras la documentación de Tailwind CSS, descubrirás que todavía queda mucho por ver sobre Flexbox. Sin embargo, sin duda, comprender estos conceptos aquí presentados son la base y la clave para dominar con excelencia todos los demás más complejos que puedan existir.

Dicho esto, este es el momento de practicar mucho y fijar estos conocimientos de la mejor forma posible. Volveremos pronto con más charlas sobre Flexbox, ¡así que estad atentos para más novedades pronto! Mientras tanto, esperamos recibir sus comentarios en los comentarios sobre cuánto le ha ayudado este artículo a dominar las clases de Tailwind relacionadas con Flexbox.

Si te ha parecido interesante este artículo, quieres aclarar alguna duda o simplemente deseas intercambiar ideas sobre estos y más temas, también puedes contactarme, ya sea por correo electrónico bruno.cabral.silva2018@gmail.com o en mi perfil do LinkedIn.

¡Saludos!