// flexbox · alineación y distribución
Controla la dirección, alineación y distribución de elementos con clases flex. Cada demo muestra el efecto visual junto a las clases aplicadas.
justify-content
justify-start
justify-center
justify-between
justify-around
items-* (eje cruzado)
items-start
items-center
items-end
flex-col + gap
flex-col gap-2
flex gap-2
grow · shrink · basis
flex-wrap
<!-- Activar flex -->
<div class="flex"></div>
<div class="inline-flex"></div>
<!-- Dirección -->
<div class="flex flex-row"></div> <!-- → defecto -->
<div class="flex flex-col"></div> <!-- ↓ -->
<div class="flex flex-row-reverse"></div>
<!-- Alineación eje principal -->
<div class="flex justify-start"></div>
<div class="flex justify-center"></div>
<div class="flex justify-end"></div>
<div class="flex justify-between"></div>
<div class="flex justify-around"></div>
<div class="flex justify-evenly"></div>
<!-- Alineación eje cruzado -->
<div class="flex items-start"></div>
<div class="flex items-center"></div>
<div class="flex items-end"></div>
<div class="flex items-stretch"></div>
<!-- Gap entre hijos -->
<div class="flex gap-4"></div>
<div class="flex gap-x-4 gap-y-2"></div>
<!-- Grow / shrink / basis -->
<div class="flex-1"></div> <!-- grow+shrink -->
<div class="flex-auto"></div> <!-- basis=auto -->
<div class="flex-none"></div> <!-- no crece -->
<div class="grow"></div>
<div class="shrink-0"></div>
<!-- Wrap -->
<div class="flex flex-wrap"></div>
<div class="flex flex-nowrap"></div>
<!-- self: sobrescribe items para un hijo -->
<div class="self-center"></div>
<div class="self-end"></div>