02 · Layout
flex organiza a los hijos directos de un contenedor en una sola dirección (fila o columna), resolviendo alineación y distribución de espacio sin floats ni trucos. Es el layout que más vas a usar en el día a día.
flex activa el modelo. flex-row (default) alinea a los hijos en fila; flex-col los apila en columna.
<div class="flex flex-row gap-3">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="flex flex-col gap-3">
<div>1</div><div>2</div><div>3</div>
</div>Con flex-row, el eje principal es horizontal. justify-between, justify-center, justify-around y justify-evenly controlan cómo se reparte el espacio sobrante entre los hijos.
<div class="flex justify-between">
<div>Izquierda</div>
<div>Derecha</div>
</div>justify-between es el patrón clásico de un header: logo a la izquierda, nav a la derecha, sin necesidad de márgenes manuales.Con flex-row, el eje cruzado es vertical. items-center, items-start, items-end, items-stretch controlan la alineación vertical de los hijos entre sí.
<div class="flex items-center gap-3 h-20 bg-stone-100">
<div class="h-6">bajo</div>
<div class="h-12">alto</div>
</div>items-center resuelve de una línea el clásico problema de 'cómo centro esto verticalmente' que antes requería trucos con position/transform.gap-{n} (o gap-x-*/gap-y-*) separa a los hijos flex sin necesitar margin en cada uno — y sin el problema de 'margen extra al principio o al final' que tiene poner margin a todos los hijos por igual.
<div class="flex gap-4">
<div>A</div><div>B</div><div>C</div>
</div>Por defecto flex intenta meter todo en una sola línea, achicando a los hijos si hace falta. flex-wrap les permite pasar a una segunda fila cuando no caben.
<div class="flex flex-wrap gap-2">
<!-- 8 tags que no caben en una sola fila -->
</div>flex-1 hace que un hijo crezca para ocupar todo el espacio disponible, repartido entre todos los que también tengan flex-1. Muy usado para 'que este elemento ocupe el resto del ancho'.
<div class="flex gap-2">
<div class="w-24">Fijo 96px</div>
<div class="flex-1">Ocupa el resto</div>
</div>flex-1 equivale a flex-grow: 1; flex-shrink: 1; flex-basis: 0% — ignora el ancho de contenido y reparte el espacio en partes iguales entre todos los flex-1 del contenedor.Combinando flex-col en el contenedor y flex-1 en el cuerpo, el footer de la card queda siempre pegado abajo sin importar cuánto contenido tenga el cuerpo — muy común en grillas de cards de altura pareja.
<div class="flex flex-col h-64 border rounded-xl">
<div class="p-4">Título</div>
<div class="flex-1 p-4">Cuerpo (crece)</div>
<div class="p-4 border-t">Footer siempre abajo</div>
</div>