w3docs logo

Propriété CSS align-content

La propriété CSS align-content est utilisée pour aligner les lignes de conteneur flex, quand il y a un espace disponible verticalement (sur le cross-axis).

S'il n'y a qu'une ligne dans flexbox, cette propriété n'aura aucun effet. On doit avoir des lignes multiples dans le conteneur flex.

La valeur "stretch" est la valeur initiale de cette propriété.

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

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch
Valeur initiale stretch
Appliquée à Conteneurs multi-line flex.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.alignContent = "flex-end",

Syntaxe

align-content: flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: stretch; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: stretch;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-content: stretch;</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Essayons un autre exemple, où on a appliquée la valeur "center".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: center; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: center;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-content: center; </h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: flex-start; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-content: flex-start;</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Exemple avec "flex-end", où les objets sont placés à la fin.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: flex-end; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: flex-end;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-content: flex-end;</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Un autre exemple, où la valeur "space-between" est appliquée. Les objets sont placés entre les lignes.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: space-between; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: space-between;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-content: space-between;</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Un autre exemple avec la valeur "space-around". Il y a une espace égale entre les objets.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: space-around; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: space-around;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de align-content: space-around;</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Valeurs

Valeur Description
stretch Les lignes des éléments flex s’étendent équitablement et reprennent l’espace qui reste. Cette valeur est utilisée par défaut.
center Objets sont placés au milieu du conteneur.
flex-start Objets sont placés au début du conteneur.
flex-end Objets sont placés à la fin du conteneur.
space-between Objets sont placés entre les lignes.
space-around Les lignes des éléments flex s’étendent équitablement.
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

Quelles sont les différentes valeurs possibles pour la propriété CSS 'align-content'?
Trouvez-vous cela utile?