Propriété CSS align-items

La propriété CSS align-items définit l'alignement par défaut des éléments flex (et des éléments de grille) le long de l'axe transversal de leur conteneur. C'est l'équivalent transversal de justify-content, qui aligne les éléments le long de l'axe principal.

Cette page explique ce qu'est l'axe transversal, passe en revue chaque valeur avec un exemple interactif, et montre comment align-items est lié à align-self et à align-content.

Comprendre l'axe transversal

Dans un conteneur flex, l'axe principal est la direction dans laquelle les éléments s'écoulent, définie par flex-direction. L'axe transversal lui est perpendiculaire :

flex-direction: row (valeur par défaut) → l'axe principal est horizontal, donc l'axe transversal est vertical, et align-items contrôle l'alignement vertical.
flex-direction: column → l'axe principal est vertical, donc l'axe transversal est horizontal, et align-items contrôle l'alignement horizontal.

Comme l'axe dépend de flex-direction, des noms tels que flex-start et flex-end sont utilisés à la place de top/bottom — ils signifient toujours « début de l'axe transversal » et « fin de l'axe transversal », quelle que soit la direction.

Remarque : align-items s'applique uniquement aux conteneurs flex et grid — il n'a aucun effet sur un élément avec le display: block par défaut. Définissez d'abord display: flex (ou display: grid) sur le parent.

Quand l'utiliser

Le cas d'usage classique est le centrage vertical : display: flex; align-items: center centre les enfants verticalement sans marges ni positionnement absolu. Combinez-le avec justify-content: center pour centrer un élément sur les deux axes — le problème de longue date « centrer une div » résolu en deux lignes.

align-items vs. align-self vs. align-content

align-items est défini sur le conteneur et contrôle l'alignement transversal par défaut de tous les éléments.
align-self est défini sur un élément individuel pour remplacer le align-items du conteneur uniquement pour cet élément.
align-content aligne les lignes en tant que groupe lorsque le conteneur flex comporte plusieurs lignes (flex-wrap: wrap). Avec une seule ligne, il n'a aucun effet — c'est dans ce cas qu'on utilise align-items.

Cette propriété fait partie des propriétés CSS3.

La propriété align-items accepte les valeurs suivantes :

stretch
flex-start
center
flex-end
baseline

Valeur initiale	stretch
S'applique à	Conteneurs flex et grid.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.alignItems = "center";

Syntaxe

align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;

Exemples

stretch (par défaut)

Avec stretch, les éléments s'étendent pour remplir toute la taille de l'axe transversal du conteneur (ici, la hauteur totale), tant qu'ils n'ont pas de hauteur fixe propre.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: stretch;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Essayez vous-même »

center

Les éléments sont positionnés au centre de l'axe transversal (centrés verticalement ici).

Exemple de propriété CSS align-items avec la valeur center

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: center;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Essayez vous-même »

flex-start

Les éléments sont placés au début de l'axe transversal (en haut, avec le flex-direction: row par défaut).

Exemple de propriété CSS align-items avec la valeur flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-start;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Essayez vous-même »

flex-end

Les éléments sont placés à la fin de l'axe transversal (en bas, avec le flex-direction: row par défaut).

Exemple de propriété CSS align-items avec la valeur flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-end;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Essayez vous-même »

baseline

Les éléments sont alignés de sorte que leurs lignes de base de texte se rejoignent. Cela est utile lorsque les éléments contiennent du texte de différentes tailles de police et que vous souhaitez que les lettres reposent sur une ligne commune.

Exemple de propriété CSS align-items avec la valeur baseline

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: baseline;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: baseline; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
stretch	Étire les éléments pour remplir le conteneur. C'est la valeur par défaut de cette propriété.	Essayer »
center	Les éléments sont placés au centre du conteneur.	Essayer »
flex-start	Les éléments sont placés au début du conteneur.	Essayer »
flex-end	Les éléments sont placés à la fin du conteneur.	Essayer »
baseline	Les éléments sont positionnés à la ligne de base du conteneur.	Essayer »
initial	Applique la valeur par défaut de la propriété.	Essayer »
inherit	Hérite de la propriété depuis son élément parent.

Pièges courants

stretch n'a aucun effet si les éléments ont une taille fixe sur l'axe transversal. Si un élément possède déjà une height (dans un conteneur en ligne), stretch ne peut pas l'agrandir. Supprimez la taille fixe pour permettre l'étirement.
Rien ne se passe sans conteneur flex ou grid. align-items est ignoré si le parent n'a pas display: flex ou display: grid.
L'axe est inversé avec flex-direction: column. Dans ce cas, align-items contrôle l'alignement horizontal et non vertical.
Pour aligner un seul élément, utilisez align-self sur cet élément plutôt que de modifier l'ensemble du conteneur.

Propriétés associées

justify-content — alignement le long de l'axe principal.
align-self — remplace align-items pour un seul élément.
align-content — aligne les lignes enroulées en tant que groupe.
flex-direction — choisir quel axe est l'axe principal.

Exercice

Pratique

Quelles sont les valeurs possibles de la propriété 'align-items' en CSS ?