Propriété CSS justify-content

La propriété justify-content distribue l'espace restant le long de l'axe principal d'un conteneur flex (ou grid), en contrôlant la façon dont ses éléments sont espacés et alignés lorsqu'ils ne remplissent pas toute la ligne. Il s'agit d'une sous-propriété du module Flexible Box Layout et l'une des propriétés CSS3.

Cette page explique ce qu'est l'axe principal, présente chaque valeur avec un exemple exécutable et liste les points d'attention à connaître.

Pourquoi l'axe principal est important

justify-content n'a d'effet que le long de l'axe principal — la direction dans laquelle les éléments flex s'écoulent. Cette direction est définie par flex-direction :

flex-direction: row (la valeur par défaut) → l'axe principal va de gauche à droite, donc justify-content déplace les éléments horizontalement.
flex-direction: column → l'axe principal va de haut en bas, donc la même valeur justify-content déplace désormais les éléments verticalement.

Pour aligner les éléments sur l'axe transversal (la direction perpendiculaire), utilisez plutôt align-items, et pour espacer les lignes flex enveloppées, utilisez align-content. Une erreur courante des débutants est d'utiliser justify-content pour centrer quelque chose verticalement dans un conteneur en ligne par défaut — c'est le rôle de align-items.

Info

justify-content ne prend effet que lorsque le conteneur est un conteneur flex (ou grid) — c'est-à-dire que la propriété display est définie sur flex ou grid. Sur un conteneur de bloc ordinaire, elle ne fait rien.

Valeur initiale	flex-start
S'applique à	Les conteneurs flex.
Hérité	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.justifyContent = "center";

Syntaxe

Syntaxe CSS justify-content

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

Exemple de la propriété justify-content :

Exemple de code CSS justify-content

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .center {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: center;
      }
      .center div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: center" is set:</p>
    <div class="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété justify-content avec la valeur "flex-start" :

Exemple CSS justify-content flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .start {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: flex-start;
      }
      .start div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: flex-start" is set:</p>
    <div class="start">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété justify-content avec la valeur "flex-end" :

Exemple CSS justify-content flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .end {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: flex-end;
      }
      .end div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: flex-end" is set:</p>
    <div class="end">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété justify-content avec la valeur "space-between" :

Exemple CSS justify-content space-between

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .space-between {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: space-between;
      }
      
      .space-between div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: space-between" is set:</p>
    <div class="space-between">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété justify-content avec la valeur "space-around" :

Exemple CSS justify-content space-around

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .space-around {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: space-around;
      }
      .space-around div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: space-around" is used:</p>
    <div class="space-around">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété justify-content avec la valeur "space-evenly" :

Avec space-evenly, les espaces avant le premier élément, entre chaque élément et après le dernier élément sont tous égaux. (Avec space-around, les espaces extérieurs représentent seulement la moitié des espaces entre les éléments, tandis que space-between ne laisse aucun espace extérieur.)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .space-evenly {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: space-evenly;
      }
      .space-evenly div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: space-evenly" is used:</p>
    <div class="space-evenly">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Points importants à retenir

justify-content ne fait rien si le parent n'est pas un conteneur flex ou grid (display: flex / display: grid).
Les trois mots-clés « space » diffèrent uniquement par les espaces extérieurs : space-between n'en a pas, space-around donne des espaces extérieurs de demi-taille, space-evenly rend tous les espaces égaux.
L'axe sur lequel il agit suit flex-direction. En passant à column, la même valeur fonctionne de haut en bas.
Cela n'a d'importance que lorsqu'il reste de l'espace libre. Si les éléments remplissent déjà (ou débordent de) l'axe principal, l'alignement n'a rien à distribuer.

Valeurs

Valeur	Description	Essayer
flex-start	Les éléments partent du début du conteneur.	Essayer »
flex-end	Les éléments sont placés à la fin du conteneur.	Essayer »
center	Les éléments sont placés au centre du conteneur.	Essayer »
space-around	Il y a de l'espace avant, entre et après les éléments.	Essayer »
space-between	Il y a de l'espace entre les éléments.	Essayer »
space-evenly	Il y a un espace égal avant, entre et après les éléments.	Essayer »
initial	La propriété utilise sa valeur par défaut.	Essayer »
inherit	Hérite de la propriété de son élément parent.

Pratique

Que fait la propriété 'justify-content' en CSS ?

Elle aligne les éléments du conteneur flex lorsque les éléments n'utilisent pas tout l'espace disponible sur l'axe principal.Elle change la couleur du texte d'une page web.Elle aligne verticalement les éléments du conteneur flex.Elle aligne les éléments de la boîte lorsque les éléments n'utilisent pas tout l'espace disponible sur l'axe transversal.Elle spécifie le positionnement le long de l'axe principal de la ligne courante du conteneur flex.

Propriétés associées

align-items — aligne les éléments le long de l'axe transversal.
align-content — espace les lignes flex enveloppées le long de l'axe transversal.
flex-direction — définit quel axe est l'axe principal.
The Ultimate Guide to Flexbox — le modèle Flexbox complet en un seul endroit.