Maquetación Web Dinámica / Layouts I: Flexbox completo
justify-content y align-items: todas las combinaciones
Dos propiedades del contenedor gobiernan la alineación en Flexbox: una por eje. Cuando las domines, frases como "centrado y separado", "pegado abajo a la derecha" o "repartidos con aire" se traducirán a CSS sin pensar. Esta lección es tu tabla de referencia visual.
justify-content: repartir en el eje principal
<p class="t">flex-start (default)</p>
<div class="flex js"><div class="i">1</div><div class="i">2</div><div class="i">3</div></div>
<p class="t">center</p>
<div class="flex jc"><div class="i">1</div><div class="i">2</div><div class="i">3</div></div>
<p class="t">space-between: extremos pegados, resto repartido</p>
<div class="flex jb"><div class="i">1</div><div class="i">2</div><div class="i">3</div></div>
<p class="t">space-around / space-evenly: con aire en los bordes</p>
<div class="flex je"><div class="i">1</div><div class="i">2</div><div class="i">3</div></div>body { font-family: system-ui; padding: 20px; }
.t { font-size: 12px; color: #64748b; margin: 0 0 4px; }
.flex { display: flex; background: #f1f5f9; border-radius: 8px; padding: 6px; margin-bottom: 12px; }
.i { background: #6d28d9; color: white; border-radius: 6px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.js { justify-content: flex-start; }
.jc { justify-content: center; }
.jb { justify-content: space-between; }
.je { justify-content: space-evenly; }Los seis valores: flex-start, center, flex-end, y los tres
repartidores — space-between (extremos tocando los bordes),
space-around (cada ítem con su margen igual a ambos lados, por lo que los
bordes quedan con medio espacio) y space-evenly (TODOS los espacios
idénticos, bordes incluidos).
El más usado en el mundo real es space-between: es el patrón "logo a la
izquierda, menú a la derecha" de todo header.
align-items: alinear en el eje cruzado
<p class="t">stretch (default): se estiran a la altura del contenedor</p>
<div class="flex as"><div class="i">1</div><div class="i alto">2 soy más alto</div><div class="i">3</div></div>
<p class="t">center: cada uno con su altura, centrados</p>
<div class="flex ac"><div class="i">1</div><div class="i alto">2 soy más alto</div><div class="i">3</div></div>
<p class="t">baseline: alineados por la línea del TEXTO</p>
<div class="flex ab"><div class="i grande">$29</div><div class="i">/mes</div></div>body { font-family: system-ui; padding: 20px; }
.t { font-size: 12px; color: #64748b; margin: 0 0 4px; }
.flex { display: flex; gap: 8px; background: #f1f5f9; border-radius: 8px; padding: 6px; margin-bottom: 12px; min-height: 64px; }
.i { background: #6d28d9; color: white; border-radius: 6px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.alto { padding-block: 16px; }
.grande { font-size: 24px; }
.as { align-items: stretch; }
.as .i { align-self: auto; }
.ac { align-items: center; }
.ab { align-items: baseline; }Cinco valores: stretch (default — los ítems sin altura propia se estiran),
flex-start, center, flex-end y baseline. Ese último es el
especialista: alinea por la línea base del TEXTO — mira el ejemplo del
precio: el "$29" grande y el "/mes" pequeño comparten renglón como en una
oración. Con center, el pequeño flotaría a media altura del grande.
El centrado perfecto (por fin)
Centrar algo vertical y horizontalmente atormentó a los desarrolladores durante 15 años. Con los dos ejes dominados, son dos líneas:
Header clásico: logo pegado a la izquierda, menú pegado a la derecha, ambos centrados verticalmente. ¿Las dos propiedades?
Mini-reto
Aplica el patrón al header de tu periódico: nombre del diario a un extremo,
nav al otro, todo centrado verticalmente (space-between + center).
Después juega: cambia justify-content por cada uno de los 6 valores y
observa — así se memorizan, viéndolos.
Qué sigue
Sabes repartir y alinear. La próxima lección responde la otra gran pregunta:
¿cuánto CRECE o se ENCOGE cada ítem? — flex-grow, flex-shrink, flex-basis y
la abreviatura flex descifrada de una vez.