Tailwind CSS te ofrece dos sistemas de layout fundamentales para estructurar interfaces: Flexbox y Grid. Dominarlos es clave si quieres construir proyectos web ordenados, responsivos y mantenibles desde el primer maquetado.

¿Qué es Flexbox y cómo funciona en Tailwind?

Flexbox es un modelo de layout unidimensional que organiza elementos en un solo eje a la vez: el eje X (fila) o el eje Y (columna). Cuando aplicas la clase flex en Tailwind, los elementos hijos se alinean automáticamente en una fila, uno tras otro.

Si prefieres apilarlos verticalmente, basta con añadir flex-col y los elementos se posicionarán uno debajo del otro. Esa decisión entre fila y columna define toda la lógica de tu contenedor.

¿Qué hace la clase flex en Tailwind? Activa el modelo Flexbox en un contenedor y, por defecto, ordena sus elementos hijos en fila horizontal sobre el eje X.

¿En qué se diferencia Grid de Flexbox?

Mientras Flexbox trabaja en una sola dirección, Grid funciona como una cuadrícula bidimensional compuesta por filas y columnas al mismo tiempo. Esto te permite dividir la página en áreas específicas y controlar la ubicación de cada bloque con mayor precisión.

Piensa en Flexbox como una fila de libros en un estante y en Grid como un tablero de ajedrez: ambos organizan, pero responden a necesidades distintas de diseño.

¿Cómo aplicar Flexbox paso a paso en el playground?

Un ejemplo práctico ayuda a fijar el concepto. Dentro del playground de Tailwind, puedes crear un contenedor padre con clases utilitarias y añadir varios divs hijos para observar el comportamiento.

Construyendo el contenedor padre

El punto de partida es un div con dimensiones y estilos básicos. Estas son las clases utilizadas en el ejercicio:

• w-96 para definir un ancho fijo.
• h-96 para fijar la altura.
• bg-{color}-400 para visualizar el fondo.
• p-10 para el padding interno.
• m-20 para el margin externo.

Sin la clase flex, los elementos hijos se encimarán uno sobre otro porque siguen el flujo normal del documento.

Activando el comportamiento flex

Al añadir flex al contenedor padre, los hijos se reorganizan en fila al instante. Para separarlos visualmente, puedes usar space-x-{n} cuando estén en fila, o space-y-{n} cuando trabajes en columna con flex-col.

¿Cómo cambio de fila a columna en Tailwind? Reemplaza la clase flex (que es fila por defecto) por flex-col para apilar los elementos verticalmente sobre el eje Y.

¿Cómo alinear elementos con justify e items?

Flexbox te da dos familias de utilidades para controlar la alineación: justify-* actúa sobre el eje principal y items-* sobre el eje cruzado. Combinarlas es lo que te da control total sobre la posición.

Estas son las variantes más usadas en Tailwind:

• justify-start: alinea los elementos al inicio del eje X (posición por defecto).
• justify-center: centra los elementos horizontalmente.
• justify-end: empuja los elementos al final del eje X.
• items-start: alinea verticalmente al inicio.
• items-center: centra verticalmente.
• items-end: alinea al final del eje Y.

Para centrar perfectamente un grupo de elementos dentro de un contenedor, la combinación ganadora es flex justify-center items-center. Si los necesitas pegados a la esquina inferior derecha, cambia a justify-end items-end.

¿Cuál es la diferencia entre justify-content e items en Tailwind? justify-* controla la distribución sobre el eje principal (X en fila, Y en columna), mientras que items-* alinea sobre el eje cruzado.

¿Por qué Flexbox importa tanto en tu proyecto?

Durante el desarrollo de cualquier interfaz, vas a usar Flexbox constantemente: navegaciones, cards, formularios, menús. Es el caballo de batalla del maquetado moderno y Tailwind lo expone con clases utilitarias claras y rápidas de escribir.

Grid entra en juego cuando el diseño exige una estructura bidimensional más compleja, como un dashboard con áreas definidas o una galería con celdas de distinto tamaño.

Ahora te toca experimentar. Crea un ejemplo propio combinando flex, flex-col, justify-center o las utilidades de Grid y compártelo en los comentarios para revisarlo juntos.