align-self en CSS : sortir un seul enfant de l'alignement du groupe

align-items pose une règle d'alignement pour tous les enfants d'un conteneur flex ou grid, mais il arrive qu'un seul élément doive s'écarter de cette règle commune : un avatar qui doit rester collé en haut pendant que le reste du groupe se centre, ou un bouton qui doit s'aligner en bas d'une carte quand tout le reste flotte au centre. align-self répond exactement à ce besoin.

On la rencontre dès qu'une mise en page a besoin d'une exception ponctuelle à une règle d'alignement globale, sans avoir à créer un conteneur supplémentaire ni à dupliquer les styles du groupe pour un seul élément.

Définition

align-self est la propriété qui écrase, pour un seul élément, la valeur d'align-items définie sur son conteneur parent. Elle se pose directement sur l'enfant à traiter différemment, jamais sur le conteneur.

.conteneur {
  display: flex;
  align-items: center;
}

.element-particulier {
  align-self: flex-start;
}

Tous les enfants du conteneur se centrent verticalement, sauf .element-particulier, qui reste collé en haut, indépendamment de la règle commune posée par align-items.

Les valeurs acceptées

align-self accepte les mêmes valeurs qu'align-items, plus une valeur supplémentaire qui n'a de sens que sur un enfant individuel.

auto est la valeur par défaut, et c'est précisément ce qui fait qu'align-self n'a d'effet que là où on le déclare explicitement : sans cette propriété, chaque enfant se contente d'hériter le comportement fixé par align-items.

Un exemple concret

Une carte de profil, avec une photo centrée et un bouton d'action toujours collé en bas de la carte, illustre bien l'usage typique d'align-self.

.carte {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bouton-action {
  align-self: stretch;
  margin-top: auto;
}

Tout le contenu de la carte reste centré horizontalement grâce à align-items, sauf le bouton, qui s'étire sur toute la largeur grâce à align-self: stretch, un comportement propre à cet unique élément.

align-self fonctionne aussi avec CSS Grid

Sur une grille CSS, align-self joue le même rôle : elle aligne le contenu d'une cellule de CSS Grid dans sa zone, verticalement, indépendamment de l'alignement défini pour les autres cellules par align-items sur le conteneur grid.

.grille {
  display: grid;
  align-items: stretch;
}

.cellule-titre {
  align-self: start;
}

Ici, toutes les cellules de la grille s'étirent verticalement, sauf .cellule-titre, qui reste collée en haut de sa zone, sans que la structure de la grille elle-même n'ait besoin d'être modifiée.

Le piège de la portée

align-self n'a d'effet que dans un contexte flex ou grid. Posée sur un élément dont le parent n'a ni display: flex ni display: grid, elle ne produit strictement aucun effet visible, sans générer la moindre erreur ou avertissement.

Questions fréquentes

Non, align-self n'agit que sur l'axe secondaire du conteneur. Pour un centrage complet, il faut combiner align-self avec un ajustement sur l'axe principal, souvent via une propriété comme margin: auto appliquée à cet élément précis, ou en repensant la structure avec justify-content sur le conteneur entier si tous les éléments doivent se centrer de la même façon.

align-self l'emporte toujours sur align-items pour l'élément concerné, sans exception. C'est précisément sa raison d'être : offrir une échappatoire ciblée à une règle générale, sans avoir besoin de contourner le conteneur ni de créer une classe CSS additionnelle pour un seul cas particulier.

Non, seuls les enfants directs d'un conteneur flex ou grid deviennent des éléments flexibles ou des éléments de grille, et align-self ne s'applique qu'à eux. Un petit-enfant, plus profond dans l'arborescence, garde son comportement d'affichage normal et ignore purement et simplement cette propriété.