Diseño con Flexbox parte 1

1. Introducción a Flexbox #

Flexbox es una técnica de diseño en CSS que permite alinear y distribuir elementos dentro de un contenedor de forma flexible. Tailwind CSS facilita el uso de Flexbox con clases simples y descriptivas.

¿Por qué usar Flexbox? #

• Alineación y distribución fácil de elementos
• Ideal para crear layouts dinámicos
• Permite alinear vertical y horizontalmente con facilidad

Activar Flexbox en Tailwind #

Para empezar a usar Flexbox en Tailwind, solo tienes que añadir la clase flex al contenedor.

1. Dirección del Contenedor (flex-row, flex-col, flex-row-reverse, flex-row-reverse) #

Puedes definir si los elementos deben alinearse horizontalmente (por defecto) o verticalmente.

• Horizontal: flex-row

• Vertical: flex-col

• Horizontal: flex-row-reverse

• Vertical: flex-col-reverse

2. Alineación en el eje principal (justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly) #

Alinea los elementos dentro del contenedor flex en el eje principal (main axis).

• justify-start: alinea los elementos al inicio.

• justify-center: alinea los elementos al centro.

• justify-end: alinea los elementos al final.

• justify-between: espacio entre los elementos.

• justify-around: espacio alrededor de cada elemento.

• justify-evenly: espacio igual entre cada elemento.

3. Alineación en eje cruzado (items-start, items-center, items-end, items-stretch, items-baseline) #

Alinea los elementos en el eje cruzado (cross axis) del contenedor flex.

• items-start: alinea los elementos al inicio.

• items-center: alinea los elementos al centro.

• items-end: alinea los elementos al final.

• items-stretch: estira los elementos para llenar el contenedor.

• items-baseline: alinea los elementos en su línea de base.

2. Control del Tamaño de los Elementos (flex-grow, flex-shrink, flex-auto, flex-none) #

Controla el crecimiento y reducción de los elementos dentro del contenedor.

• flex-grow: permite que un elemento crezca para ocupar espacio disponible.

• flex-shrink: permite que un elemento se encoja si es necesario.

• flex-auto: crece y se reduce según sea necesario.

• flex-none: evita que el elemento crezca o se encoja.

3. Orden de los Elementos (order-1, order-2, order-last, etc.) #

Puedes cambiar el orden de los elementos sin modificar el HTML.

Ejemplo Completo: Layout con Flexbox #

Apliquemos todo en un ejemplo donde distribuimos elementos de un layout de manera flexible:

En este ejemplo, usamos flex y flex-grow para distribuir el contenido principal y los aside en un layout que se adapta a la altura de la pantalla (h-screen).