justify-content

La propriété justify-content définit la façon dont le navigateur distribue l'espace entre les objets flexibles selon l'axe principal de leur conteneur..

L'alignement est effectué une fois que les longueurs et les marges sont appliquées. Ainsi, s'il y a au moins un élément flexible pour lequel on a flex-grow qui n'est pas nul, justify-content n'aura aucun effet car il n'y aura plus d'espace disponible.

Pour plus d'informations sur les différentes propriétés liées aux boîtes flexibles en CSS, voir la page Utiliser les boîtes flexibles en CSS.

Syntaxe

/* Les objets flexibles sont groupés au début */
justify-content: flex-start;

/* Les objets flexibles sont groupés à la fin */
justify-content: flex-end;

/* Les objets flexibles sont groupés au centre */ 
justify-content: center;

/* L'espace est distribué de façon équitable.
   Le premier objet commence au début de l'axe
   et le dernier finit à la fin de l'axe */
justify-content: space-between;

/* L'espace est distribué de façon équitable.
   Tous les objets ont le même espace de chaque
   côté. */
justify-content: space-around;

/* L'espace est distribué de façon équitable */
/* Tous les objets ont un demi espace égal   */
/* à chaque extrémité */
justify-content: space-evenly;

/* Valeurs globales */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

Valeurs

1. L'espace entre deux objets qui se suivent est toujours le même
2. La ligne de départ est alignée avec la marge du premier élément
3. La ligne de fin est alignée avec la marge du dernier élément.

flex-start

Les objets flexibles sont regroupés à partir de la ligne de départ de l'axe principal. La marge du premier objet flexible est aligné avec la ligne de départ et ensuite les objets sont alignés selon leurs marges, collées les unes aux autres.

flex-end

Les objets flexibles sont regroupés vers la ligne de fin de l'axe principal. La marge du dernier objet flexible est aligné avec la ligne de fin et les autres objets sont alignés avant selon leurs marges, collées les unes aux autres.

center

Les objets flexibles sont regroupés au centre de l'axe principal. Les éléments flexibles sont accolés les uns aux autres avec leurs marges. L'espace entre la ligne de départ et la marge du premier élément est le même que celui qu'on observe entre la ligne de fin et la marge du dernier élément.

space-between

Les objets flexibles sont distribués de façon équitable le long de l'axe principal. L'espacement se calcule de la façon suivante :

space-around

Les objets flexibles sont distribués de façon équitable le long de l'axe principal afin que l'espace entre deux éléments qui se suivent soit toujours le même. L'espace vide avant le premier élément et l'espace vide après le dernier élément sont égaux et correspondent à la moitié de l'espace qu'il y aura entre chaque élément.

Syntaxe formelle

flex-start | flex-end | center | space-between | space-around

Exemples

HTML

<div id="container">
  <p>justify-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-evenly</p>
  <div id="space-evenly">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

#container > div {
  display: flex;
  font-family: "Courier New", "Lucida Console", monospace;
}

#container > div > div {
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

#flex-start {
  justify-content: flex-start;
}

#center {
  justify-content: center;
}

#flex-end {
  justify-content: flex-end;
}

#space-between {
  justify-content: space-between;
}

#space-around {
  justify-content: space-around;
}

#space-evenly {
  justify-content: space-evenly;
}

Résultat

Spécifications

Compatibilité des navigateurs

[1] Pour Firefox, les boîtes flexibles sont activées par défaut depuis Firefox 28. Avant, à partir de Firefox 18, il fallait activer la préférence layout.css.flexbox.enabled dans about:config.

[2] Dans les versions antérieures de la spécification, les éléments fils positionnés de façon absolue étaient considérés comme un élément flexible de 0 par 0. Les versions suivantes retirent ces éléments du flux et définissent leurs positions selon les propriétés align et justify. Chrome implémente ce nouveau comportement à partir de Chrome 52.

[3] En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

• Utiliser les boîtes flexibles (flexbox) en CSS