Cómo utilizar Flexbox con Tailwind CSS - Parte 2

¡Saludos, queridos lectores! ¡Estoy de regreso con más aprendizaje que involucra a Flexbox y Tailwind CSS! La última vez que nos reunimos y compartimos conocimientos sobre el tema, aprendimos los conceptos básicos de Flexible Box Module (podemos llamarlo Flexbox, ¿no crees?), además de aprender a definir direcciones y alineaciones tanto en el eje vertical como en el horizontal.

Hoy aprenderemos un poco más, construyendo ejemplos usando Flex-Basis, Flex-Grow, Flex-Shrink, Order y Flex-Wrap.

Revisión

En el artículo anterior creamos una aplicación con tres bloques que sirvieron para practicar las diferentes funcionalidades que Flexbox nos puede brindar. Continuaremos con el mismo ejemplo como base, el cual contiene el siguiente código:

En el container principal (línea 5 de la figura 1), usamos el siguiente conjunto de clases para diseñar:

• bg-black - Clase que define el color de fondo de la página como negro;
• w-full - Establece el ancho del container al 100 % del ancho disponible;
• h-screen - Establece la altura del container al 100 % de la altura de la ventana gráfica (es decir, el 100 % de la pantalla disponible para visualización);
• p-2 - Crea un espaciado interno de 8 px;
• flex - Habilita las funcionalidades de Flexbox para el container, estableciendo su dirección predeterminada como horizontal, ya que no existe una definición de dirección explícita para esto;
• justify-center - Alinea los elementos dentro del container con el centro, en relación al eje principal al que están vinculados (que en este caso es el eje x);
• items-center - Alinea los elementos dentro del container al centro, en relación al eje transversal (que en este caso es el eje y).
  

También tenemos contenedores internos dentro del contenedor principal (en total tres, en las líneas 6, 11 y 16 de la figura 1). Para estos definimos:

• bg-white, bg-blue-400 e bg-yellow-200 - Cada clase define un color de fondo diferente para cada container;
• m-2- Crea un espacio exterior de 8 px para cada container.
  

Finalmente tenemos los párrafos de las líneas 7, 12 y 17 de la figura 1, donde definimos:

• p-4 - Espaciado interno de cada párrafo de 16 px;
• m-1 - Espaciado externo de 4 px;
• font-bold - Peso de fuente de texto de 700;
• text-xl - Tamaño del texto de 20 px.
  

Con ese resumen digno de calentar motores, ¡estamos listos para un nuevo comienzo!

Flex-Basis

Comencemos este viaje hablando de basis, que se utiliza para definir el tamaño inicial de cada elemento dentro de un container modelado por Flexbox. Esto es muy útil para los casos en los que necesitamos definir dentro del flex diferentes tamaños para los elementos que contiene. Apliquemos diferentes tamaños a cada uno de los elementos dentro del contenedor principal usando la clase basis:

Increíble y fácil, ¿no crees? Recordemos que el tamaño se define en función del eje sobre el que se alinean los elementos, por lo que si aplicamos la clase flex-col en el container principal de la línea 5 de la figura 2, tendremos el mismo resultado, solo que en el eje vertical:

Flex-Grow

Utilizamos grow para definir cuánto puede ocupar un determinado elemento en un espacio disponible. Para ver efectivamente de qué estamos hablando, eliminemos las clases basis de los tres bloques, además de excluir también flex-col y justify-center del container principal, insertando la clase en el mismo justify-between.

Con eso, la dirección de alineación de los bloques volverá a ser horizontal y la alineación en el eje x dejará de ser al centro, pasando a distribuir un espacio igual entre los elementos:

Ten en cuenta que, como se explicó, hay un gran espacio entre los elementos que podemos llenar usando grow:

Flex-Grow tiene dos clases: la primera que viste en acción en las figuras 8 y 9, llamada grow. La segunds tiene el efecto contrario al que usamos y se llama grow-0. Es la configuración predeterminada predeterminada para las clases flex cuando no utilizamos ningún atributo regulatorio relacionado.

Flex-Shrink

Utilizamos shrink para definir cuánto puede disminuir un artículo, si es necesario. Así como grow, solo tiene dos opciones: Aceptar que el rubro disminuya o no aceptar (clases shrink y shrink-0, respectivamente). Analicemos cómo se comporta nuestra aplicación cuando reducimos el tamaño de la pantalla:

Considera que hay un salto de línea en el texto dentro de cada bloque cuando alejamos el zoom. Esto sucede porque los elementos que se encuentran dentro de los containers flex tienen, por defecto, esta capacidad de reducirse, adaptándose al tamaño de pantalla disponible (es decir, la clase shrink es patrón cuando no declaramos ninguna clase relacionada con este tipo de “funcionalidad”). Para impedir que este comportamiento ocurra, utilizamos la clase shrink-0:

Concatenando funcionalidades

Como si la facilidad que nos proporciona Tailwind CSS a la hora de utilizar funciones como Flexbox no fuera suficiente, es posible acelerar aún más nuestra implementación utilizando este framework. ¡Hay una clase llamada flex-initial, que permite que definamos shrink y grow al mesmo tempo!

Eso es exactamente lo que lees: usándolo definimos que un elemento puede disminuir y que al mismo tiempo no puede aumentar tomando todo el espacio vacío disponible, teniendo en cuenta su tamaño inicial.

De manera similar (pero con comportamiento diferente), la clase flex-1 también combina las dos funcionalidades, con la diferencia de que define que es posible que un elemento crezca y se encoja según sea necesario y relevante, ignorando el tamaño inicial que se definió para él.

Order

Utilizamos la clase order para definir el orden en el que se presentarán los elementos en la pantalla. De esta forma, no necesariamente se mostrarán en la secuencia que ponemos en nuestro código (en nuestro caso, primero el bloque 1 y luego el bloque 3). Intente invertir el orden de visualización de estos elementos, teniendo en cuenta que cuanto menor sea la numeración utilizada, más arriba en el orden estará el elemento. También puedes usar la clase order-first para indicar un item como el primero y order-last para indicarlo como el último:

Flex-Wrap

Por último, pero no menos importante, a través del atributo flex-flow podemos definir un salto de línea o columna para los elementos. Para observar este comportamiento, creemos algunos containers dentro del principal:

Ten en cuenta que los bloques 1 y 2 ni siquiera aparecen en la pantalla y los bloques 15 a 17 lo están extrapolando. Honestamente, eso no es lo que queremos, ¿estás de acuerdo? Pero ¡cálmate! Podemos solucionar esto con una única clase Tailwind, lo que equivale a definir el atributo flex-flow de un elemento como wrap: a flex-wrap (tan intuitiva como cabría esperar de Tailwind):

Voilà! Respetando las definiciones de alineación existentes para los ejes x e y, la clase flex-wrap evita que los elementos fuercen la barra, pasando a la siguiente “fila” si la orientación es en el eje horizontal o a la siguiente “columna” si la orientación es en el eje vertical.

Además de la clase flex-wrap, también tenemos la flex-wrap-reverse (que aplica wrap en orden inverso) y flex-nowrap (que deshabilita la funcionalidad). Esta última viene como patrón cuando no utilizamos ninguna clase para configurar flex-flow.

Consideraciones finales

Aprendimos mucho sobre Flexbox en estos dos artículos, ¿verdad? Conocer más sobre Flex-Basis, Flex-Grow, Flex-Shrink, Order y Flex-Wrap complementó aún más el conocimiento que adquirimos en el artículo anterior, de modo que cubrimos la mayoría de las categorías de clases de Tailwind CSS que nos brindan funcionalidades relacionadas con el tema principal.

Es importante resaltar que el uso de las clases que se traen en este artículo solo tendrá efecto si en el container “padre” de ellos usamos la clase flex, quien realmente habilita la posibilidad de utilizar todas estas estilizaciones.

Me gustaría saber más sobre lo que pensaste de este artículo y cuánto te ayudó. Contáctame a mi e-mail bruno.cabral.silva2018@gmail.com o en mi LinkedIn.

¡Hasta la próxima!