6. Alineación de Elementos Individuales (self-start, self-center, self-end, self-stretch, self-auto)

Modifica la alineación de un elemento individual en el eje vertical.

1<div class="h-screen flex items-start">
2  <div class="self-center p-4 bg-blue-500">Elemento 1</div>
3  <div class="p-4 bg-green-500">Elemento 2</div>
4  <div class="p-4 bg-red-500">Elemento 3</div>
5</div>

7. Flex Wrap (flex-wrap, flex-nowrap, flex-wrap-reverse)

Por defecto, Flexbox organiza los elementos en una sola fila o columna, pero con flex-wrap, puedes hacer que los elementos ocupen varias filas si el espacio es limitado.

• flex-wrap: permite que los elementos se ajusten a múltiples filas cuando sea necesario.

1<div class="flex flex-wrap gap-4">
2  <div class="w-1/3 p-4 bg-blue-500 text-white">Elemento 1</div>
3  <div class="w-1/3 p-4 bg-green-500 text-white">Elemento 2</div>
4  <div class="w-1/3 p-4 bg-red-500 text-white">Elemento 3</div>
5  <div class="w-1/3 p-4 bg-yellow-500 text-white">Elemento 4</div>
6</div>

En este ejemplo, los elementos se ajustarán automáticamente en varias filas cuando el espacio no sea suficiente, gracias a flex-wrap.

• flex-nowrap: evita que los elementos se ajusten, forzándolos a permanecer en una sola línea.

1<div class="flex flex-nowrap gap-4">
2  <div class="w-1/3 p-4 bg-blue-500 text-white">Elemento 1</div>
3  <div class="w-1/3 p-4 bg-green-500 text-white">Elemento 2</div>
4  <div class="w-1/3 p-4 bg-red-500 text-white">Elemento 3</div>
5  <div class="w-1/3 p-4 bg-yellow-500 text-white">Elemento 4</div>
6</div>

• flex-wrap-reverse: envuelve los elementos en múltiples filas, pero en orden inverso.

Ejemplo:

1<div class="flex flex-wrap-reverse gap-4">
2  <div class="w-1/3 p-4 bg-blue-500 text-white">Elemento 1</div>
3  <div class="w-1/3 p-4 bg-green-500 text-white">Elemento 2</div>
4  <div class="w-1/3 p-4 bg-red-500 text-white">Elemento 3</div>
5  <div class="w-1/3 p-4 bg-yellow-500 text-white">Elemento 4</div>
6</div>

8. Flex Basis (basis-[size])

flex-basis determina el tamaño inicial de un elemento antes de que Flexbox lo ajuste. En Tailwind, puedes usar basis-[size] para establecer la base de cada elemento.

• basis-1/2: ocupa la mitad del ancho del contenedor.

1<div class="flex">
2  <div class="basis-1/3 p-4 bg-blue-500 text-white">Elemento 1</div>
3  <div class="basis-1/3 p-4 bg-green-500 text-white">Elemento 2</div>
4  <div class="basis-1/3 p-4 bg-red-500 text-white">Elemento 3</div>
5</div>

Aquí, cada elemento ocupa un tercio del ancho del contenedor gracias a basis-1/3.

• basis-full: ocupa el ancho completo del contenedor.

1<div class="flex">
2  <div class="basis-1/3 p-4 bg-blue-500 text-white">Elemento 1</div>
3  <div class="basis-full p-4 bg-green-500 text-white">Elemento 2</div>
4</div>

En este caso el primer elemento ocupa un tercio y el segundo ocupa el resto del contenedor.

• basis-1/3, basis-1/4: ocupan proporciones específicas.

1<div class="flex">
2  <div class="basis-1/3 p-4 bg-blue-500 text-white">Elemento 1</div>
3  <div class="basis-1/4 p-4 bg-green-500 text-white">Elemento 2</div>
4  <div class="p-4 bg-red-500 text-white">Elemento 3</div>
5</div>

En este ejemplo, el primer elemento ocupa un tercio, el segundo un cuarto y el tercero solamente lo que necesite ocupar.

9. Responsividad con Flexbox

Una de las grandes ventajas de Tailwind es su capacidad para manejar Flexbox en diseños responsivos. Puedes aplicar diferentes configuraciones de Flexbox según el tamaño de la pantalla.

Ejemplo:

1<div class="flex flex-col md:flex-row gap-3">
2  <div class="p-2 bg-blue-500 text-white">Elemento 1</div>
3  <div class="p-2 bg-green-500 text-white">Elemento 2</div>
4  <div class="p-2 bg-red-500 text-white">Elemento 3</div>
5</div>

En este ejemplo, los elementos se apilan en una columna en pantallas pequeñas (flex-col), pero se organizan en una fila en pantallas medianas o más grandes (md:flex-row).

10. Espaciado entre Elementos (gap)

Con la clase gap, puedes agregar espacio entre elementos en un contenedor flex. Esto es útil para crear un diseño limpio y ordenado sin la necesidad de agregar márgenes a cada elemento individualmente.

• gap-4: espacio entre elementos de 1 rem.
• gap-x-4: espacio horizontal.
• gap-y-4: espacio vertical.

Ejemplo:

1<div class="flex gap-4">
2  <div class="p-4 bg-blue-500 text-white">Elemento 1</div>
3  <div class="p-4 bg-green-500 text-white">Elemento 2</div>
4  <div class="p-4 bg-red-500 text-white">Elemento 3</div>
5</div>

En este ejemplo, gap-4 añade espacio uniforme entre cada elemento en ambas direcciones.

11. Ejemplo Práctico: Crear una Galería Responsiva

Ahora combinaremos los conceptos anteriores para crear una galería de tarjetas (cards) que se ajusta automáticamente a diferentes tamaños de pantalla.

1<div class="flex flex-wrap gap-4 p-4">
2  <div class="basis-full sm:basis-1/2 lg:basis-1/3 p-4 bg-blue-500 text-white">Card 1</div>
3  <div class="basis-full sm:basis-1/2 lg:basis-1/3 p-4 bg-green-500 text-white">Card 2</div>
4  <div class="basis-full sm:basis-1/2 lg:basis-1/3 p-4 bg-red-500 text-white">Card 3</div>
5  <div class="basis-full sm:basis-1/2 lg:basis-1/3 p-4 bg-yellow-500 text-white">Card 4</div>
6</div>

Explicación

1. flex-wrap: permite que las tarjetas se ajusten en varias filas.
2. basis-full: las tarjetas ocupan el ancho completo en pantallas pequeñas.
3. sm:basis-1/2: en pantallas medianas, cada tarjeta ocupa la mitad del ancho.
4. lg:basis-1/3: en pantallas grandes, cada tarjeta ocupa un tercio del ancho.
5. gap-4: añade espacio uniforme entre las tarjetas.

Con esto, tienes una galería que se adapta a diferentes tamaños de pantalla automáticamente.

Conclusión

Flexbox en Tailwind CSS simplifica la creación de layouts flexibles y responsivos. Con solo agregar clases, puedes controlar la alineación, el orden, el tamaño y la distribución de elementos, adaptando tus diseños a cualquier pantalla.