align-self

align-self es la propiedad que permite que un único ítem flex ignore la alineación que impone el contenedor mediante align-items y adopte su propia posición en el eje cruzado. Mientras align-items actúa sobre todos los hijos a la vez, align-self actúa sobre un único hijo y tiene prioridad sobre la declaración del contenedor — es literalmente un override de ítem.

Esta distinción resuelve un problema muy concreto: en una barra de navegación donde todos los ítems están centrados verticalmente, a veces uno necesita pegarse al borde inferior (por ejemplo, una etiqueta decorativa o un badge de notificación). Sin align-self, la única salida sería sacar ese ítem del flujo flex o manipularlo con margin — soluciones frágiles. Con align-self: flex-end en ese ítem, la excepción queda declarada limpiamente sin tocar el resto.

El valor por defecto de align-self es auto, que simplemente hereda el valor efectivo de align-items del contenedor. Si el contenedor no declara align-items, el valor heredado es stretch. Esto hace que align-self: auto sea transparente en el 99 % de los casos: el ítem se comporta como si align-self no existiera, delegando todo al contenedor.

Sintaxis

.item-especial {
  align-self: auto;       /* hereda align-items del contenedor (por defecto) */
  align-self: stretch;    /* se estira para llenar la altura de la línea */
  align-self: flex-start; /* al inicio del eje cruzado */
  align-self: flex-end;   /* al final del eje cruzado */
  align-self: center;     /* centrado en el eje cruzado */
  align-self: baseline;   /* alinea su línea de base de texto con la del resto */
}

Valores

auto (por defecto)

El ítem hereda el valor efectivo de align-items del contenedor. Si el contenedor no declara align-items, el comportamiento es stretch. En la práctica, align-self: auto es equivalente a no declarar la propiedad — el ítem se alinea como el resto.

stretch

El ítem se estira para llenar toda la altura de su línea flex (o todo el ancho, si el eje cruzado es horizontal). Es el comportamiento que hace que las tarjetas de una fila tengan la misma altura automáticamente. El estiramiento se limita por min-height/max-height del ítem.

flex-start

El ítem se posiciona al inicio del eje cruzado (cross-start). Con flex-direction: row, es el borde superior del contenedor.

flex-end

El ítem se posiciona al final del eje cruzado (cross-end). Con flex-direction: row, es el borde inferior del contenedor.

center

El ítem se centra en el eje cruzado. El espacio libre del eje cruzado se divide en partes iguales arriba y abajo (o izquierda/derecha si el eje cruzado es horizontal).

baseline

El ítem se alinea de forma que su línea de base tipográfica coincida con la de los demás ítems que también usan baseline. Es útil cuando distintos ítems tienen distintos tamaños de fuente y se quiere que el texto quede alineado visualmente.

Cuándo usarlo

align-self es la herramienta correcta cuando un único ítem dentro de un contenedor flex necesita una alineación diferente al resto:

Si todos los ítems necesitan cambiar de alineación, usá align-items en el contenedor en lugar de align-self en cada ítem.

Notas y gotchas

• auto hereda del contenedor, no es stretch fijo. Si el contenedor cambia su align-items, todos los ítems con align-self: auto se actualizan automáticamente. Esto es lo correcto la mayoría del tiempo: el ítem sigue a la regla general del contenedor.
• align-self no existe en el contenedor, existe en el ítem. Es un error común intentar aplicarlo al elemento con display: flex.
• Si hay margin: auto en el eje cruzado, align-self no tiene efecto. Un margin-top: auto o margin-bottom: auto absorbe el espacio disponible antes de que align-self pueda posicionar el ítem.
• El eje cruzado rota con flex-direction. Con flex-direction: column, el eje cruzado es horizontal y align-self: flex-end coloca el ítem a la derecha, no abajo.
• align-self no aplica a ítems con position: absolute. Los ítems absolutamente posicionados son sacados del flujo flex y no participan en el algoritmo de alineación.

Relación con align-items y align-content

• align-items → alinea todos los ítems del contenedor. Actúa dentro de cada línea.
• align-self → anula align-items para un solo ítem. Tiene mayor prioridad.
• align-content → distribuye el espacio entre líneas cuando hay flex-wrap: wrap. No afecta a ítems individuales.

En grid

align-self funciona de la misma forma en un ítem grid que en un ítem flex, con una diferencia de contexto: el “contenedor de alineación” es la celda del ítem (o el área que ocupa si abarca varias celdas), no el eje cruzado del contenedor flex. El ítem se alinea verticalmente dentro de su celda, no dentro del contenedor completo.

Los valores son los mismos — stretch, start, end, center — y stretch sigue siendo el default: el ítem llena toda la altura de su celda. Cambiándolo, el ítem se comprime a su contenido y queda posicionado dentro de la celda.

/* En un ítem grid */
.grid-item {
  align-self: start;    /* pegado al borde superior de su celda */
  align-self: end;      /* pegado al borde inferior de su celda */
  align-self: center;   /* centrado verticalmente en su celda */
  align-self: stretch;  /* llena toda la altura de su celda (por defecto) */
}

En grid, align-self alinea en el eje de bloque (vertical); su contraparte en el eje en línea (horizontal) es justify-self, que no existe en Flexbox. El shorthand place-self combina ambas: place-self: center centra el ítem en los dos ejes dentro de su celda.

El valor del contenedor equivalente — que establece el default para todos los ítems — es align-items tanto en flexbox como en grid. Ver align-items y el concepto-agregador de CSS Grid.

Vigente / legacy

align-self está disponible en todos los navegadores modernos desde 2015 (baseline widely). No se necesitan prefijos de vendor. La versión con prefijo -webkit-align-self era necesaria para Safari 6–8, navegadores que ya no tienen soporte activo en ningún proyecto nuevo.