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<div class="flex">
2  <div class="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>

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

1<div class="flex flex-row">
2  <div class="p-4 bg-blue-500">Elemento 1</div>
3  <div class="p-4 bg-green-500">Elemento 2</div>
4</div>

Vertical: flex-col

1<div class="flex flex-col">
2  <div class="p-4 bg-blue-500">Elemento 1</div>
3  <div class="p-4 bg-green-500">Elemento 2</div>
4</div>

Horizontal: flex-row-reverse

1<div class="flex flex-row-reverse">
2  <div class="p-4 bg-blue-500">Elemento 1</div>
3  <div class="p-4 bg-green-500">Elemento 2</div>
4</div>

Vertical: flex-col-reverse

1<div class="flex flex-col-reverse">
2  <div class="p-4 bg-blue-500">Elemento 1</div>
3  <div class="p-4 bg-green-500">Elemento 2</div>
4</div>

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

Understanding CSS Flexbox

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

justify-start: alinea los elementos al inicio.

1<div class="flex justify-start">
2  <div class="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>

justify-center: alinea los elementos al centro.

1<div class="flex justify-center">
2  <div class="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>

justify-end: alinea los elementos al final.

1<div class="flex justify-end">
2  <div class="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>

justify-between: espacio entre los elementos.

1<div class="flex justify-between">
2  <div class="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>

justify-around: espacio alrededor de cada elemento.

1<div class="flex justify-around">
2  <div class="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>

justify-evenly: espacio igual entre cada elemento.

1<div class="flex justify-evenly">
2  <div class="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>

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

Understanding CSS Flexbox

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

items-start: alinea los elementos al inicio.

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

items-center: alinea los elementos al centro.

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

items-end: alinea los elementos al final.

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

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

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

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

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

4. 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.

1<div class="flex">
2  <div class="flex-grow p-4 bg-blue-500">Elemento 1</div>
3  <div class="p-4 bg-green-500">Elemento 2</div>
4</div>

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

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

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

1<div class="flex">
2  <div class="flex-auto p-4 bg-blue-500">Elemento 1</div>
3  <div class="p-4 bg-green-500">Elemento 2</div>
4</div>

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

1<div class="flex">
2  <div class="flex-none p-4 bg-blue-500">Elemento 1</div>
3  <div class="flex-grow p-4 bg-green-500">Elemento 2</div>
4</div>

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

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

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

Ejemplo Completo: Layout con Flexbox

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

1<div class="flex flex-col h-screen">
2  <header class="p-4 bg-blue-500 text-white">Header</header>
3  <div class="flex flex-grow">
4    <aside class="flex-none w-1/4 p-4 bg-green-500 text-white">Sidebar</aside>
5    <main class="flex-grow p-4 bg-gray-200">Contenido Principal</main>
6    <aside class="flex-none w-1/4 p-4 bg-green-500 text-white">Sidebar</aside>
7  </div>
8  <footer class="p-4 bg-blue-500 text-white">Footer</footer>
9</div>

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).

Curso de tailwind CSS