w3docs logo

Propriété CSS justify-content

La propriété justify-content aligne les éléments quand les éléments n'utilisent pas toute l'esppace disponible horizontalement. Elle est la sous-propriété du module Flexible Box Layout. Cela contrôle l'alignement des éléments quand ils débordent la ligne.

La propriété justify-content doit être utilisée avec la propriété display définie à "flex". Pour aligner les éléments verticalement, utilisez la propriété align-items.
Valeur initiale flex-start
Appliquée à Conteneurs flex.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.justifyContent = "center";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
    <style> 
      .center {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: center; /* Safari 6.1+ */
      display: flex;
      justify-content: center;
      }
      .center div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété justify-content</h2>
    <p>Ici on a défini "justify-content: center":</p>
    <div class="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Exemple avec la valeur "flex-start":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
    <style> 
      .start {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: flex-start; /* Safari 6.1+ */
      display: flex;
      justify-content: flex-start;
      }
      .start div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété justify-content</h2>
    <p>Ici on a défini "justify-content: flex-start" :</p>
    <div class="start">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Un autre exemple avec la valeur "flex-end":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
    <style> 
      .end {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: flex-end; /* Safari 6.1+ */
      display: flex;
      justify-content: flex-end;
      }
      .end div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété justify-content</h2>
    <p>Ici on a défini "justify-content: flex-end":</p>
    <div class="end">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Exemple où la propriété justify-content est spécifiée par la valeur "space-between" :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
    <style> 
      .space-between {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-between; /* Safari 6.1+ */
      display: flex;
      justify-content: space-between;
      }
      .space-between div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété ustify-content</h2>
    <p>Ici on a défini "justify-content: space-between":</p>
    <div class="space-between">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Voici un exemple avec la valeur "space-around":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
    <style> 
      .space-around {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-around; /* Safari 6.1+ */
      display: flex;
      justify-content: space-around;
      }
      .space-around div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété justify-content</h2>
    <p>Ici on a utilisé "justify-content: space-around":</p>
    <div class="space-around">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
flex-start Les éléments commencent à partir du début du conteneur.
flex-end Les éléments sont positionnés à la fin du conteneur.
center Les éléments sont positionnés au centre du conteneur.
space-around Il y a un espace avant, après et entre les lignes des éléments.
space-between Il y a un espace acant les lignes des éléments.
initial Définit 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 valeurs possibles pour la propriété CSS 'justify-content' ?
Trouvez-vous cela utile?