align-self

Sobrescribe el valor de align-items para un único ítem, alineándolo en el eje cruzado sin afectar a sus hermanos.

auto (predeterminado): hereda el valor de align-items del contenedor.
flex-start: coloca el ítem al inicio del eje cruzado.
center: centra el ítem en el eje cruzado.
flex-end: coloca el ítem al final del eje cruzado.
stretch: estira el ítem para ocupar todo el eje cruzado si no tiene un tamaño fijo.
baseline: alinea el ítem según la línea base de su texto.

Ejemplo

El contenedor centra sus hijos con align-items: center, así que auto también los deja centrados. El hijo con la clase item puede escapar de esa regla con align-self.

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-items: center;
  height: 10rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  align-self: auto;
  background: #d9d2f5;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-items: center;
  height: 10rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  align-self: auto;
  background: #d9d2f5;
}

Edita el código o usa los selectores: el resultado cambia al instante.