justify-content

La propriété CSS justify-content indique la façon dont l'espace doit être réparti entre et autour des éléments selon l'axe principal du conteneur.

/* Alignement « géométrique » */
justify-content: center;     /* Éléments groupés au centre */
justify-content: start;      /* Éléments groupés au début */
justify-content: end;        /* Éléments groupés à la fin */
justify-content: flex-start; /* Éléments flexibles groupés au début */
justify-content: flex-end;   /* Éléments flexibles groupés à la fin */
justify-content: left;       /* Éléments groupés à gauche */
justify-content: right;      /* Éléments groupés à droite */

/* Alignement par rapport à la ligne de base */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Alignement distribué */
justify-content: space-between; /* Les éléments sont répartis équitablement
                                   Le bord du premier est aligné sur le 
                                   début du conteneur et la fin du dernier
                                   est alignée sur la fin du conteneur */
justify-content: space-around;  /* Les éléments sont répartis équitablement
                                   À chaque extrémité, entre le bord du 
                                   conteneur et le premier/dernier élément
                                   on a la moitié de l'espace appliqué entre
                                   chaque élément */
justify-content: space-evenly;  /* Les éléments sont répartis équitablement
                                   Tous les éléments sont séparés par le même
                                   espace */
justify-content: stretch;       /* Les élémnts sont répartis équitablement et 
                                   les éléments dimensionnés avec 'auto' sont
                                   étirés afin de remplir le conteneur */

/* Alignement pour le dépassement */
justify-content: safe center;
justify-content: unsafe center;

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

L'alignement est appliqué après que les longueurs et les marges automatiques aient été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel flex-grow est différent de 0, justify-content n'aura aucun effet car il n'y aura plus d'espace disponible.

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

Syntaxe

Valeurs

start
Les éléments sont regroupés au début du conteneur selon l'axe principal. Le bord du premier élément est aligné avec le bord du conteneur.
end
Les éléments sont regroupés à la fin du conteneur selon l'axe principal. Le bord du dernier élément est aligné avec le bord du conteneur.
flex-start
Les éléments sont regroupés vers le début du conteneur, selon l'axe principal et le sens du conteneur flexible.
Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de start.
flex-end
Les éléments sont regroupés vers la fin du conteneur, selon l'axe principal et le sens du conteneur flexible.
Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de end.
center
Les éléments sont regroupés au centre du conteneur selon l'axe principal.
left
Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de start.
right
Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de start.
baseline
first baseline

last baseline
Ces valeurs permettent d'aligner les éléments selon les différentes lignes de base.
En cas de besoin first baseline correspondra à start, et last baseline correspondra à end.
space-between
Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est aussi aligné sur le bord de l'élément.
space-around
Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. L'espace entre le bord du conteneur et le premier élément et l'espace entre le dernier élément et le bord du conteneur représente la moitié de l'espace entre deux éléments.
space-evenly
Les éléments sont espacés équitablement. L'espace utilisé entre chaque élément, entre le bord du conteneur et le premier élément, et entre le dernier élément et le bord du conteneur est le même.
stretch
Si la somme des tailles des éléments est inférieure à la taille du conteneur, tous les éléments dimensionnés avec auto sont agrandis avec le même supplément, tout en respectant les contraintes imposées par max-height/max-width (ou par les fonctionnalités analogues). Ainsi, l'ensemble des éléments remplit exactement le conteneur sur l'axe principal.
safe
Si l'élément dépasse du conteneur, il est aligné comme avec la valeur start.
unsafe
Quelle que soit les tailes relatives des éléments par rapport au conteneur, l'alignement indiqué est respecté.

Syntaxe formelle

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

Exemples

CSS

#container {
  display: flex;
  /* Cette valeur peut être changée dans l'exemple */
  justify-content: space-between;
}

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

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 Ajout des valeurs space-evenly, [ first | last ]? baseline, start, end, left, right, safe et unsafe.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 21.0 -webkit
29.0[3]
(Oui)-webkit
(Oui)
18.0 (18.0)[1]
20.0 (20.0)[2]
11 12.10 9
space-evenly Pas de support Pas de support 52.0 (52.0) Pas de support ? ?
start, end Pas de support[4] Pas de support (Oui) Pas de support Pas de support[4] ?
left, right Pas de support[4] Pas de support 52.0 (52.0)[5] Pas de support Pas de support[4] ?
baseline 57.0 Pas de support (Oui) Pas de support 44.0 ?
first baseline, last baseline Pas de support Pas de support 52.0 (52.0) Pas de support Pas de support ?
stretch 57.0 Pas de support 52.0 (52.0) Pas de support 44.0 ?
Fonctionnalité Firefox Mobile (Gecko) Android Webview Android Edge IE Phone Opera Mobile Safari Mobile Chrome pour Android
Support simple ? ? (Oui)[3] (Oui)-webkit
(Oui)
Pas de support 12.10 ? (Oui)[3]
space-evenly 52.0 (52.0) Pas de support Pas de support Pas de support Pas de support Pas de support Pas de support Pas de support
start, end Pas de support[4] Pas de support (Oui) Pas de support Pas de support[4] ?
left, right Pas de support[4] Pas de support 52.0 (52.0)[5] Pas de support ?[4] ?
baseline 57.0 Pas de support (Oui) Pas de support 44.0 ?
first baseline, last baseline Pas de support Pas de support 52.0 (52.0) Pas de support Pas de support ?
stretch 57.0 Pas de support 52.0 (52.0) Pas de support 44.0 ?

[1] Jusqu'à Firefox 27, Firefox ne prenait en charge que les boîtes flexibles sur une seule ligne. Pour Firefox 18 et 19, il fallait activer la préférence layout.css.flexbox.enabled.

[2] À partir de Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45), Gecko prend aussi en charge une version préfixée par -webkit à des fins de compatibilité web via la préférencelayout.css.prefixes.webkit. Cette préférence est activée par défaut depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46).

[3] Dans les anciennes versions de la spécification, les éléments fils positionnés de façon absolue étaient considérés comme des objets flexibles de 0 pixels par 0 pixels. Dans les versions suivantes, ces éléments sont retirés du flux et leurs positions sont construites par rapport aux valeurs des propriétés align-* et justify-*. Chrome implémente ce nouveau comportement à partir de Chrome 52.

[4] Les mots-clés start, end, left et right sont reconnus mais ne sont pas implémentés.

[5] Avan Gecko 52 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49), les mots-clés left et right étaient bien reconnus mais n'étaient pas implémentés.

Voir aussi

Étiquettes et contributeurs liés au document

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