Justify-content - Propriété CSS

Schéma de la syntaxe de justify-content.

* indique une valeur par défaut, qui peut être omise.

Description de la propriété justify-content.

La propriété justify-content définit l'alignement des éléments dans un conteneur flex-box ou un conteneur grille.

Utilisation de justify-content sur un conteneur flex.

justify-content gère l'alignement des éléments suivant l'axe principal, qui est le plus souvent l'axe horizontal.
Rappel : pour un flex-box, l'axe principal et l'axe secondaire sont définis par la propriété flex-direction.

Utilisation de justify-content sur un conteneur grille.

Utilisée sur un container grille, justify-content définit le positionnement des colonnes dans le conteneur grille. Bien entendu, cela suppose que si la largeur totale des colonnes est inférieure à la largeur du conteneur grille.

Il convient de distinguer le positionnement des colonnes dans le conteneur (propriété justify-content dont on parle sur cette page) et le positionnement des éléments dans leur colonne (propriété justify-items).

Voici l'exemple d'une grille où les colonnes sont alignées sur le début du conteneur (justify-content:start) et les éléments sur la fin de leur colonne (justify-items:end).

Autres propriétés à connaître.

Ces propriétés concernent toutes le positionnement des éléments dans un flex, dans une grille ou plus généralement dans un bloc. Certaines d'entre elles (comme justify-items) ne s'appliquent pas aux flex-box.

Valeurs pour justify-content sur un conteneur flex-box.

• justify-content: flex-start; justify-content: flex-end;

  Les éléments internes sont groupés au début ou à la fin du flex-box, compte tenu de la valeur de la propriété flex-direction.

  Valeurs flex-start et flex-end en fonction de flex-direction
  flex-direction	flex-start	flex-end
  row	A gauche	A droite
  row-reverse	A droite	A gauche
  column	En haut	En bas
  column-reverse	En bas	En haut

  Voici deux exemples du résultat de la propriété justify-content avec la valeur flex-start.

  1

  2

  3

  4

  5

  6
  flex-direction:row;
justify-content:flex-start;
  1

  2

  3

  4

  5

  6
  flex-direction:row-reverse;
justify-content:flex-start;

  Remarque : les valeurs start et end sont généralement acceptées sur un flex-box, mais ne prennent pas en compte la direction d'écriture définie par flex-direction.
  Il en est de même pour les valeurs left et right qui positionnent les éléments sur la gauche ou la droite du conteneur flex, sans considérer la direction attribuée à ce conteneur.

• justify-content: center;

  Les éléments internes d'un flex-box sont groupés au centre du conteneur suivant l'axe principal, sans ajout d'espaces entre eux, autres que les marges spécifiques à chacun des éléments.

  1

  2

  3

  4

  5

  6
  justify-content:center;
• justify-content: space-between;

  Le premier élément est calé au début du conteneur, le dernier élément est à la fin du conteneur; l'espace restant est réparti également entre les autres éléments.

  

  1

  2

  3

  4

  5

  6
  justify-content:space-between;
• justify-content: space-around;

  L'espace restant disponible dans le conteneur est réparti entre les éléments, en gardant un demi-espace avant le premier élément et un demi-espace après le dernier élément.

  

  1

  2

  3

  4

  5

  6
  justify-content:space-around;
• justify-content: space-evenly;

  L'espace restant disponible dans le conteneur est réparti de façon égale entre les éléments, avant le premier élément, et après le dernier élément.

  

  1

  2

  3

  4

  5

  6
  justify-content:space-evenly;

Valeurs pour justify-content sur un conteneur grille.

• justify-content: normal;

  La valeur normal est traitée comme la valeur start (voir plus loin).

  1

  2

  3

  4

  5

  6
  justify-content:normal;
• justify-content: start; justify-content: end;

  Les colonnes sont groupées au début ou à la fin du conteneur grille.
  Rappelons que le positionnement des éléments dans leur colonne est géré par justify-items. Dans nos exemples, les éléments sont centrés dans leur colonne.

  1

  2

  3

  4

  5

  6
  justify-content:start;

  Remarque : les valeurs flex-start et flex-end sont généralement acceptées par les navigateurs, mais ces derniers les traitent comme start et end lorsqu'il s'agit dune grille.

• justify-content: left; justify-content: right;

  Appliquées à un conteneur grille, ces valeurs sont équivalentes respectivement à start et à end.

  1

  2

  3

  4

  5

  6
  justify-content:left;
• justify-content: center;

  Les colonnes sont groupées au centre du conteneur grille.

  1

  2

  3

  4

  5

  6
  justify-content:center;
• justify-content: stretch;

  La valeur stretch provoque un élargissement des colonnes jusqu'au remplissage complet du conteneur grille.

  Attention ! Cette valeur ne produit un effet que si au moins une des colonnes a une largeur fixée à auto : les colonnes dont la largeur est fixée à une dimension précise ne sont pas modifiées. D'autre part, si la largeur de au moins une des colonnes a été définie avec l'unité fr, il ne reste pas de place disponible dans le conteneur. La valeur stretch appliquée à justify-content sera donc également sans effet.

  1

  2

  3

  4

  5

  6
  grid-template-columns:repeat(3, auto);
justify-content:stretch;
• justify-content: space-between;

  Les colonnes sont réparties sur la largeur du conteneur de la façon suivante : a première colonne est calée à gauche, la dernière est calée à droite, et l'espace restant est réparti de façon égale entre les colonnes intérieures.

  Si D est l'espace restant disponible dans le conteneur et n le nombre de colonnes, l'espace e entre les colonnes est calculé par la formule :
  Espace entre colonnes e = D / (n-1)

  

  1

  2

  3

  4

  5

  6
  justify-content:space-between;
• justify-content: space-around;

  Les espaces entre les colonnes d'une grille, ainsi que les espaces avant la première colonne et après la dernière colonne sont ajustés pour emplir toute la place disponible, les espaces au début et à la fin étant deux fois moins larges que l'espace entre les colonnes.

  Espace entre les colonnes e = D / n
  Espace au début et à la fin e = D / 2n
  Avec D étant l'espace disponible et n le nombre de colonnes.

  

  1

  2

  3

  4

  5

  6
  justify-content:space-around;
• justify-content: space-evenly;

  Les colonnes sont réparties sur la largeur du conteneur de façon à ce que les espaces entre les colonnes, et les espaces avant la première colonne ou après la dernière soient tous égaux.

  Si D est l'espace restant et n le nombre de colonnes, les espaces sont calculés par la formule :
  Espace e = D / (n+1)

  

  1

  2

  3

  4

  5

  6
  justify-content:space-evenly;
• justify-content: safe ...; justify-content: unsafe ...;

  Les modificateurs safe et unsafe peuvent être ajoutés avant le mot clé définissant l'alignement lorsque ce denier est start, end, center, right ou left. Le rôle de safe est d'empêcher les débordements du mauvais côté.

  unsafe (par défaut) : l'alignement demandé est respecté même s'il provoque un débordement difficile à gérer.
  safe : si l'alignement demandé provoque un débordement du mauvais côté, alors l'élément est aligné comme avec start.
  

  Voici un exemple du "débordement du mauvais côté". La grille ci-dessous contient du code informatique. Ce genre de contenu ne peut pas accepter des retours à la ligne n'importe où. Les lignes débordent donc fréquemment de la place qui leur est impartie. Il est facile de prévoir une barre de défilement pour permettre la consultation du contenu masqué (voir la propriété overflow).
  Malheureusement, lorsque le débordement se produit du côté début de bloc, ou début de ligne, la barre de défilement ne permet pas de le faire apparaître le contenu masqué.

  Note : dans l'exemple les colonnes sont alignées sur la fin du conteneur (justify-content:end).

  for(var i=0; i<50; i++)
if(value[i]>maxValue) {maxValue=value[i];}
}
  align-content:end;

  Le modificateur safe autorise le navigateur à ne pas respecter scrupuleusement l'alignement demandé pour faire en sorte que le débordement se fasse du côté fin de bloc ou fin de ligne. Ce qui permet d'utiliser la barre de défilement.

  for(var i=0; i<50; i++)
if(value[i]>maxValue) {maxValue=value[i];}
}
  align-content:safe end;
• justify-content: initial; (normal) justify-content: inherit; justify-content: revert; justify-content: revertLayer; justify-content: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de justify-content.

La démo ci-dessous est une animation de justify-content, qui parcourt les principales valeurs de cette propriété.

Accéder à la propriété justify-content par programme.

Modifier la valeur de justify-content en Javascript.

En Javascript, voici comment modifier la valeur de justify-content pour un élément el. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['justify-content'] = 'end'; // ou let el = document.getElementById('id'); el.style.justifyContent = 'end';

Lire en Javascript la valeur de justify-content.

La propriété doit avoir été affectée directement à l'élément lui-même via l'attribut style du HTML, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['justify-content']; // ou let el = document.getElementById('id'); let value = el.style.justifyContent;

Lire la valeur calculée de justify-content en Javascript.

La valeur calculée est prioritairement celle qui est affectée à l'élément, puis ce sera une valeur héritée. Enfin, en dernier recours, si aucune valeur n'est affectée, cela sera la valeur initiale de la propriété, soit normal.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('justify-content');

Modifier la valeur de la propriété justify-content avec JQuery.

Comme en Javascript, on retrouve deux syntaxes possibles.


$('#id').css('justify-content', 'end');
// ou
$('#id').css('justifyContent', 'end');


Lire la valeur calculée de la propriété justify-content avec JQuery.

La lecture de la propriété peut se faire avec le code suivant.

let value = $('#id').css('justify-content');

Autres exemples.

D'autres exemples de code concernant la manipulation des propriétés CSS en Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété justify-content et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de justify-content, mais dans le cas de justify-content les valeurs affectée et calculée seront les mêmes.

Exemple interactif avec la propriété justify-content.

Compatibilité des navigateurs avec justify-content.

La propriété justify-content est bien reconnue par les navigateurs, aussi bien dans le contexte d'un conteneur grille que d'un conteneur flex. Les valeurs ajoutées récemment dans la norme sont maintenant bien reconnues également : space-evenly, start et end.

1

Propriété
justify-content
(flex-box)

2

Propriété
justify-content
(grille)

3

Valeur
space-evenly

4

Valeurs
start et end

Estimation de la prise en charge globale.

96%

95%

96%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Opéra

Safari

Firefox

Chrome pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété justify-content.

• Module CSS - Mise en page par flex-box - Niveau 1

  Concernant justify-content. Introduction de la propriété justify-content dans le contexte d'un flex-box.
  

  23 Juillet 2009

  Document de travail.

  

  18 Septembre 2012

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 1

  Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
  Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
  Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.

  Concernant justify-content. Introduction de la propriété justify-content dans le contexte d'un conteneur grille.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 2

  Ce niveau 2 de la spécification sur les grilles introduit la notion de sous-grille. Il s'agit de grille imbriquées dans une autre, avec conservation des alignement de colonnes et/ou de lignes.

  Concernant justify-content. Pas de changement concernant la propriété justify-content.
  

  06 Février 2018

  Document de travail.

  

  18 Août 2020

  Candidat à la recommandation.

  

  

• Module CSS - Alignement des blocs - Niveau 3

  Concernant justify-content. Le module de spécification "Box alignment" regroupe maintenant les propriétés de positionnement, dimensionnement et alignement des blocs.
  

  12 Juin 2012

  Document de travail.

  

  

  

Autres propriétés de positionnement et d'alignement.

Les propriétés d'alignement, de positionnement et de dimensionnement des blocs sont regroupées dans le module module CSS - Alignement des blocs, aussi bien pour les flex-box, que les grilles ou les conteneurs multi-colonnes.

Propriétés :