order y align-self: excepciones controladas

Las reglas del contenedor gobiernan al grupo — pero a veces UN ítem necesita otra cosa: aparecer de primero aunque el HTML lo tenga de último, o alinearse distinto a sus hermanos. Para eso existen order y align-self: dos propiedades de ítem, pequeñas y precisas, con una advertencia importante cada una.

order: el orden visual, no el real

Todo ítem tiene order: 0 por defecto; el navegador los pinta de menor a mayor (y a igual order, según el HTML). Números negativos van al frente:

<p class="t">HTML: a, b, c — pero c tiene order: -1</p>
<div class="flex">
<div class="i">a</div>
<div class="i">b</div>
<div class="i destacado">c (order: -1)</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: 8px; }
.i { background: #6d28d9; color: white; border-radius: 6px; padding: 10px 18px; font-weight: 600; }
.destacado { background: #b45309; order: -1; }

align-self: la alineación individual

Sobrescribe el align-items del contenedor para UN ítem (mismos valores):

<p class="t">align-items: center — pero la etiqueta se ancla arriba</p>
<div class="flex">
<span class="badge">NUEVO</span>
<div class="i">contenido</div>
<div class="i">centrado</div>
</div>

body { font-family: system-ui; padding: 20px; }
.t { font-size: 12px; color: #64748b; margin: 0 0 4px; }
.flex { display: flex; gap: 8px; align-items: center; background: #f1f5f9; border-radius: 8px; padding: 8px; min-height: 110px; }
.i { background: #6d28d9; color: white; border-radius: 6px; padding: 14px 18px; font-weight: 600; }
.badge { align-self: flex-start; background: #b45309; color: white; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; }

El patrón clásico: todos centrados, pero el badge "NUEVO" anclado a la esquina superior. Sin align-self necesitarías un contenedor extra solo para esa etiqueta.

Y un dato para el futuro cercano: justify-self NO existe en Flexbox (en el eje principal el reparto es del grupo, vía justify-content). En Grid — módulo 6 — sí existirá. Si algún día lo escribes en un flex y no pasa nada: ya sabes por qué.

Mini-reto

En el header de tu periódico, agrega un badge "EDICIÓN DIGITAL" con align-self: flex-start mientras el resto sigue centrado. Y prueba el order: dale -1 al nav y observa cómo se cruza con el logo — luego decide, como maquetador, si esa excepción te compra algo o solo confunde.

Qué sigue

Tienes el 100% de las piezas de Flexbox. La próxima lección es puro oficio: los 5 patrones flex que resuelven el 90% de los layouts del mundo real — navbar, media object, centrado, footer pegado y tarjetas equidistantes.