w3docs logo

Propriété CSS align-items

La propriété CSS align-items définit l'alignement initial pour les objets flex. C'est juste comme la propriété justify-content mais la version verticale.

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

  • stretch
  • flex-start
  • center
  • flex-end
  • baseline
Valeur initiale stretch
Appliquée à Tous les éléments.
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;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: stretch; /* Safari 7.0+ */
      display: flex;
      align-items: stretch;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-items: stretch;</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>

Exemple avec la valeur "center", où les objets sont positionnés au milieu du conteneur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: center; /* Safari 7.0+ */
      display: flex;
      align-items: center;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-items: center;</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>

Exemple avec la valeur "flex-start", où les objets sont placés au début.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: flex-start; /* Safari 7.0+ */
      display: flex;
      align-items: flex-start;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-items: flex-start;</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>

Ici nous avons appliquée la valeur "flex-end" qui place les objets à la fin du conteneur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: flex-end; /* Safari 7.0+ */
      display: flex;
      align-items: flex-end;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-items: flex-end;</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>

Et un exemple avec la valeur "baseline" qui place les objets sur la ligne de base du conteneur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: baseline; /* Safari 7.0+ */
      display: flex;
      align-items: baseline;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>
    Exemple de align-items: baselne; 
    <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>

Valeurs

Valeur Description
stretch Les lignes dans le conteneur flex s’étendent équitablement et reprennent la hauteur disponible. C'est la valeur initiale de cette propriété.
center Tous les éléments flex sont positionnés au centre du conteneur et ont les mêmes indentations en haut et en bas.
flex-start Tous les éléments flex sont positionnés en bord supérieur du conteneur.
flex-end Tous les éléments flex sont positionnés en bord inférieure du conteneur.
baseline Tous les éléments flex sont positionnés sur la ligne de base du conteneur.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
29.0+
21-28 -webkit- 		28.0+ 9.0+
6.1-8.0 -webkit- 		12.1+

Pratiquez vos connaissances

Quelle valeur de 'align-items' positionne les éléments le long de l'axe transversal du conteneur vers le centre ?
Trouvez-vous cela utile?