align-items
Aligne les éléments sur l’axe secondaire d’un conteneur flex ou grid.
- Valeur initiale
normal- Héritée
- Non
- Animable
- non
- S’applique à
- tous les éléments, l’effet se voit dans les conteneurs flex et grid
- JavaScript
element.style.alignItems = "center"
Exemple
#.profile {
display: flex;
align-items: center;
gap: 12px;
}<div class="profile stage">
<div class="box" style="border-radius: 999px">LD</div>
<div>
<strong>Léa Dupont</strong><br>
<small>Niveau 7 · 1240 EXP</small>
</div>
</div>Définition et utilisation
#La propriété align-items positionne tous les éléments du conteneur sur l’axe secondaire, c’est-à-dire perpendiculaire à l’axe principal. En ligne (flex-direction: row), c’est un alignement vertical : en haut, en bas, au centre ou sur la ligne de base du texte.
Par défaut, les éléments flex s’étirent (stretch) sur toute la hauteur de la ligne. C’est pourquoi les colonnes d’une mise en page flex ont une hauteur égale sans aucune astuce.
Un élément isolé peut remplacer ce réglage avec sa propre propriété align-self.
Syntaxe
#align-items: normal | stretch | flex-start | flex-end | center | baseline | start | end;Valeurs
#- Les éléments sans hauteur définie s’étirent sur toute la hauteur du conteneur.
- Les éléments se collent au début de l’axe secondaire, en ligne au bord supérieur.
- Les éléments se collent à la fin de l’axe secondaire.
- Les éléments se placent au centre de l’axe secondaire.
- Les éléments s’alignent de façon à ce que les lignes de base de leur texte soient sur une même ligne, même avec des tailles de police différentes.
Valeurs en pratique
#stretch
.demo { align-items: stretch; }flex-start
.demo { align-items: flex-start; }flex-end
.demo { align-items: flex-end; }center
.demo { align-items: center; }baseline
.demo { align-items: baseline; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si vous voulez aligner un seul élément, utilisez
align-selfsur cet élément. - Avec
flex-direction: column, l’axe secondaire est horizontal, doncalign-itemsaligne les éléments horizontalement.
Entrées associées
#- justify-contentRépartit les éléments le long de l’axe principal d’un conteneur flex ou grid.
- align-selfRemplace l’alignement d’un seul élément sur l’axe secondaire.
- align-contentRépartit des lignes entières d’éléments sur l’axe secondaire du conteneur.
- flex-directionDéfinit le sens de l’axe principal : les éléments flex s’alignent en ligne ou en colonne.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.