Accueil >CSS >Référence CSS – propriétés, sélecteurs, fonctions >align-self

align-self

align-self: auto | normal | stretch | flex-start | flex-end | center | baseline | start | end

Remplace pour un élément l’align-items du conteneur : les autres peuvent être étirés et celui-ci en haut, ou tous en haut et un seul en bas.

Valeurs

  • auto – par défaut : l’élément suit l’align-items du conteneur.
  • Les autres valeurs comme pour align-items : stretch, flex-start, flex-end, center, baseline, start, end…

Valeur initiale : auto. Héritée : non. S’applique à : les éléments flex et grid, les éléments positionnés en absolu.

Exemples

Le conteneur aligne en haut, le deuxième élément est au centre et le troisième en bas :

<div class="flex">
  <div class="tall">haut</div>
  <div class="center">center</div>
  <div class="bottom">flex-end</div>
</div>

.flex {
  display: flex;
  padding: 6px;
  border: 2px dashed #999;
}
.flex > div {
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.flex {
  align-items: flex-start;
  gap: 6px;
  max-width: 300px;
}
.tall { height: 80px; }
.center { align-self: center; }
.bottom { align-self: flex-end; }
Résultat
haut
center
flex-end

Points d’attention

  • Sur l’axe principal, justify-self n’existe pas dans Flexbox – margin-left: auto (ou margin-top: auto dans une colonne) repousse un élément le long de l’axe principal.
  • Une margin: auto sur l’axe secondaire l’emporte sur align-self.

Prise en charge par les navigateurs

Baseline – largement disponible : dans tous les navigateurs courants depuis septembre 2015, considéré comme largement disponible depuis mars 2018. Depuis la version : Chrome 29, Firefox 20, Safari 9. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
align-items
justify-self
order
margin