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 d'un conteneur flexible ou selon l'axe en ligne lorsque le conteneur est une grille.

L'exemple suivant illustre le fonctionnement des valeurs de cette propriété au sein d'une grille CSS.

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.

Syntaxe

/* 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 ne prend pas de valeurs relatives à la ligne de base */

/* Alignement normal */
align-content: normal;

/* 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éments 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;

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.
normal
Les éléments sont groupés sur leur position par défaut, comme si justify-content n'avait pas été utilisé. Cette valeur se comporte comme stretch dans les conteneurs de grille et les conteneurs flexibles.
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 sur l'axe principal 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
Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Si le mot-clé choisi indique que le dépassement de l'objet entraîne la perte de donnée, alors l'élément sera plutôt aligné avec la valeur start.
unsafe
Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Quelle que soit la situation de dépassement ou les contraintes de taille, la valeur utilisée pour l'alignement est respectée.

Syntaxe formelle

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]


<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

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 Level 3
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.
Valeur initialenormal
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

Compatibilité des navigateurs

Prise en charge pour les dispositions flexibles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 52
Support complet 52
Support partiel 29
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Before Firefox 27, Firefox supported only single-line flexbox.
Aucun support 18 — ?
Désactivée
Désactivée From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 48
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11Opera Support complet 12.1Safari Support complet 9WebView Android Support complet 52
Support complet 52
Support partiel 4.4
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 52
Support complet 52
Support partiel 29
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android ? Opera Android Support complet 12.1Safari iOS ? Samsung Internet Android Support complet Oui
space-evenlyChrome Support complet 60Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 47Safari Support complet 11WebView Android Support complet 60Chrome Android Support complet 60Edge Mobile Aucun support NonFirefox Android Support complet 52Opera Android Support complet 47Safari iOS Support complet 11Samsung Internet Android Aucun support Non
start and endChrome Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Edge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Edge Aucun support NonFirefox Support complet 52
Support complet 52
Aucun support ? — 52
Notes
Notes This value is recognized, but has no effect.
IE Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Opera Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 52
Support complet 52
Aucun support ? — 52
Notes
Notes This value is recognized, but has no effect.
Opera Android ? Safari iOS ? Samsung Internet Android ?
baselineChrome Support complet 57Edge Aucun support NonFirefox Aucun support ? — 60
Notes
Aucun support ? — 60
Notes
Notes justify-content no longer accepts baseline values
IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support ? — 60
Notes
Aucun support ? — 60
Notes
Notes justify-content no longer accepts baseline values
Opera Android ? Safari iOS ? Samsung Internet Android ?
first baseline and last baselineChrome Aucun support NonEdge Aucun support NonFirefox Aucun support 52 — 60
Notes
Aucun support 52 — 60
Notes
Notes justify-content no longer accepts baseline values
IE Aucun support NonOpera Aucun support NonSafari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support 52 — 60
Notes
Aucun support 52 — 60
Notes
Notes justify-content no longer accepts baseline values
Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non
stretchChrome Support complet 57Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 44Safari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 52Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome Aucun support NonEdge Aucun support NonFirefox Support complet 63IE Aucun support NonOpera Aucun support NonSafari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 63Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Prise en charge pour les grilles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 57Edge Support complet 16Firefox Support complet 52IE Aucun support NonOpera Support complet 44Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 52Edge Mobile Support complet OuiFirefox Android Support complet 52Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.2

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, YoannR., ChristopheBoucaut
Dernière mise à jour par : SphinxKnight,