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.

Note : À l'avenir, cette propriété pourrait être appliquée à d'autres éléments que les conteneurs flexibles. Aussi, mieux vaut éviter d'en annuler les effets via une valeur de display. Le groupe de travail CSS se penche sur l'extension de son utilisation à l'ensemble des éléments de bloc. Le brouillon de cette spécification est encore très jeune et n'est pas encore implémenté.

Valeur initialeflex-start
Applicabilitéconteneurs flexibles
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

Spécification État Commentaires
CSS Flexible Box Layout Module
La définition de 'justify-content' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
CSS Box Alignment Module
La définition de 'justify-content' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Support simple 18.0 (18.0)[1]
20.0 (20.0)[3]
21.0 -webkit
29.0 [2]
(Oui) 11 12.10 9
space-evenly 52.0 (52.0) Pas de support ? Pas de support ? ?
Fonctionnalité Firefox Mobile (Gecko) Android Android Webview Edge IE Phone Opera Mobile Safari Mobile Chrome pour Android
Support simple ? ? (Oui) [2] (Oui) Pas de support 12.10 ? (Oui) [2]

[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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, ChristopheBoucaut
 Dernière mise à jour par : SphinxKnight,