Propriété align-items CSS

Définition et utilisation

align-items La propriété spécifie le mode d'alignement par défaut pour les éléments dans le conteneur flexible.

Astuce :Utilisez la propriété de chaque élément align-self les propriétés pour couvrir cette propriété align-items.

Voir également :

Tutoriel CSS :CSS Grid

Tutoriel CSS :Flexbox CSS

Manuel de référence CSS :Propriété align-content

Manuel de référence CSS :Propriété align-self

Manuel de référence CSS :Propriété justify-content

Manuel de référence CSS :Propriété justify-items

Manuel de référence CSS :Propriété justify-self

Manuel de référence HTML DOM :AlignItems Attribute

Exemple

Aligner au centre tous les éléments du <div> flexible :

div {
  display: flex;
  align-items: center;
}

Essayez-le vous-même

Syntaxe CSS

align-items: stretch|center|flex-start|flex-end|ligne de base|initial|inherit;

Valeur de l'attribut

Valeur Description
stretch Par défaut. L'élément est étiré pour s'adapter au conteneur.
center L'élément est situé au centre du conteneur.
flex-start L'élément est situé au début du conteneur.
flex-end L'élément est situé à la fin du conteneur.
ligne de base L'élément est positionné sur la ligne de base du conteneur.
initial Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit Cette propriété est héritée de l'élément parent. Voir : inherit.

Détails techniques

Valeur par défaut : stretch
Héritage : Non
Réalisation des animations : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.alignItems="center"

Prise en charge du navigateur

Les numéros dans le tableau indiquent la première version de navigateur prenant en charge cette propriété.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0