Propiedad CSS align-self

La propiedad CSS align-self alinea un único elemento flex o de cuadrícula a lo largo del eje transversal de su contenedor, anulando el valor de align-items establecido en el contenedor.

Mientras que align-items alinea todos los elementos del contenedor a la vez, align-self permite seleccionar un elemento concreto y alinearlo de forma diferente. Esta es la propiedad que se usa cuando un elemento necesita salirse de la norma — por ejemplo, fijando un logotipo en la parte superior de una fila de encabezado mientras el resto de los elementos permanecen centrados verticalmente.

align-self solo tiene efecto cuando el elemento está dentro de un contenedor flex, un contenedor de cuadrícula, o está posicionado de forma absoluta. En un elemento de bloque normal no tiene efecto, por eso un valor como stretch no hace nada hasta que también se establece display: flex (o grid) en el elemento padre. Es una de las propiedades CSS3.

Relación con align-items

La relación es "contenedor vs. elemento":

align-items se establece en el contenedor y alinea todos los elementos a lo largo del eje transversal.
align-self se establece en un elemento individual y anula lo que indica el align-items del contenedor para ese elemento en concreto.

Como align-self acepta los mismos valores que align-items, solo hace falta aprender el conjunto de valores una vez. El valor predeterminado auto simplemente significa "usar el valor align-items del contenedor", de modo que un elemento sin align-self sigue el comportamiento general.

Información

align-self se ignora cuando el elemento flex tiene un margen vertical auto (el margen automático gana y absorbe el espacio libre). Tampoco tiene efecto en celdas de tabla ni en cajas de bloque independientes que no sean elementos flex o de cuadrícula.

Valor inicial	auto
Se aplica a	Elementos flex, elementos de cuadrícula y cajas con posicionamiento absoluto.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.alignSelf = "auto";

Sintaxis

Sintaxis de la propiedad CSS align-self

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

Ejemplo de la propiedad align-self:

Ejemplo de la propiedad CSS align-self con el valor flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(1) {
        align-self: flex-start;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the first box is set to "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Pruébalo tú mismo »

Resultado

El align-items: center del contenedor mantiene las cajas #2 y #3 centradas verticalmente, mientras que la caja #1 — con align-self: flex-start — salta a la parte superior, anulando el valor del contenedor solo para sí misma.

A continuación se muestra un ejemplo con tres cajas en el que la segunda tiene el valor "flex-end".

Ejemplo de la propiedad align-self con el valor "flex-end":

Ejemplo de la propiedad CSS align-self con el valor flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: flex-end;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con el valor "stretch":

Por defecto, un elemento flex solo ocupa la altura que necesita su contenido. Establecer align-self: stretch en un elemento hace que ese único elemento crezca para llenar el tamaño transversal completo del contenedor, mientras los demás conservan su altura natural. Para que stretch funcione, la propiedad height del elemento debe estar sin definir (o en auto).

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: stretch;
        height: auto;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "stretch".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

align-self en CSS Grid

align-self no es exclusivo de Flexbox — funciona de la misma manera dentro de un contenedor de cuadrícula, alineando un elemento de la cuadrícula a lo largo del eje de bloque (columna) de su área:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* default for every item */
}
.grid .featured {
  align-self: start; /* this one item hugs the top of its cell */
}

En CSS Grid se usan las palabras clave start y end en lugar de flex-start y flex-end, pero el concepto es idéntico: el contenedor establece un valor predeterminado con align-items, y align-self lo anula por elemento.

Cuándo usar align-self

Un elemento diferente al resto. La mayoría de los elementos deben alinearse de una forma, pero un único elemento (un icono, una insignia, una llamada a la acción) necesita una posición distinta.
Fijación en la parte superior o inferior de una fila centrada. Una barra de navegación que centra verticalmente sus enlaces pero fija el logotipo en la parte superior.
Hacer que una tarjeta se estire. En una fila de tarjetas de igual altura, forzar solo una para que llene la altura con align-self: stretch.

Si todos los elementos necesitan la misma alineación, establece align-items en el contenedor en su lugar — es más limpio que repetir align-self en cada hijo.

Valores

Valor	Descripción	Pruébalo
auto	El elemento hereda la propiedad align-items de su contenedor padre. Este es el valor predeterminado.	Pruébalo »
stretch	Hace que los elementos se estiren para llenar el contenedor.	Pruébalo »
center	Los elementos se colocan en el centro del contenedor.	Pruébalo »
flex-start	Los elementos se colocan al principio del contenedor.	Pruébalo »
flex-end	Los elementos se colocan al final del contenedor.	Pruébalo »
baseline	Los elementos se posicionan en la línea base del contenedor.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'align-self' en CSS?

Permite anular la alineación predeterminada, o la especificada por align-items, para elementos flex individuales.Se usa para cambiar el color de fondo de un elemento.Crea una nueva capa en la página web.Alinea los elementos flex a lo largo de la línea vertical dentro de sus contenedores

Propiedades relacionadas

align-items — la versión a nivel de contenedor de esta propiedad.
align-content — alinea las filas de un contenedor flex multilínea.
justify-content — alinea los elementos a lo largo del eje principal.
flex-direction — establece cuál es el eje principal (y por tanto cuál controla align-self).
Guía definitiva de Flexbox — cómo encajan todas las propiedades de alineación de Flexbox.