Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

justify-content - Propriété CSS

justify-content

Résumé des caractéristiques de la propriété justify-content

Description rapide
Définit le positionnement suivant l'axe principal dans un flex-box ou une grille.
Statut
Standard
Valeurs prédéfinies
normal | stretch | left | center | right | start | end | flex-start | flex-end | space-around | space-between | space-evenly
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété justify-content passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Alignement des blocs
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CR (document proposé pour la recommandation)

Description.

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).

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

Syntaxe de justify-contentSchéma syntaxique de la propriété CSS justify-content (alignement du contenu dans une grille ou un flex-box). flex-start flex-start flex-end flex-end center center space-between space-between space-around space-around space-evenly space-evenlyjustify-content:;justify-content:;Télécharger l'image en SVG
     
  • 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-directionflex-startflex-end
    rowA gaucheA droite
    row-reverseA droiteA gauche
    columnEn hautEn bas
    column-reverseEn basEn 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.

    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.

    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.

    space-evenly

  • justify-content: initial; justify-content: inherit; justify-content: revert; justify-content: revert-layer; justify-content: unset;

    La valeur initiale est : normal.

Syntaxes pour justify-content sur un conteneur grille.

Syntaxe de justify-contentSchéma syntaxique de la propriété CSS justify-content (alignement du contenu dans une grille). normal normal stretch stretch space-between space-between space-around space-around space-evenly space-evenly safe safe unsafe unsafe start start end end center center left left right rightjustify-content:;justify-content:;Télécharger l'image en SVG
     
  • 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)

    Valeur space-between pour justify-content

  •  
  • 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.

    Valeur space-around pour justify-content

  •  
  • 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)

    Valeur space-evenly pour justify-content

  •  
  • 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(valeur[i]>max) {max=valeur[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(valeur[i]>max) {max=valeur[i];}
    }
    align-content:safe end;
  • justify-content: initial; justify-content: inherit; justify-content: revert; justify-content: revert-layer; justify-content: unset;

    La valeur initiale est : normal.

Animation de la propriété justify-content.

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

1
2
3
4
5

Manipulation de la propriété justify-content par programme.

Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite travailler.

D'autres exemples de codes sont proposés sur la page sur Javascript et CSS.

a
b
c
d
e
f

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).


function setJustifyContent(el) {
el.style['justify-content']='end';
// ou
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. La couleur est renvoyée sous son nom s'il s'agit d'une couleur nommée, ou sous la forme rgb(r, g, b) si elle a été définie autrement que par son nom (code hexadécimal, fonction hsl(), etc...).


function getJustifyContent(el) {
alert(el.style['justify-content']);
// ou
alert(el.style.justifyContent);
}

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

La valeur calculée est celle qui résulte de l'évaluation des unités relatives (en particulier le pourcentage) et de la prise en compte éventuelle des valeurs héritées.

Dans le cas de justify-content, la couleur est retournée sous la forme rgb(r,g,b), ou rgba(r,g,b,a) si l'opacité n'est pas totale.


function getCalcJustifyContent(el) {
alert(window.getComputedStyle(el).getPropertyValue('justify-content'));
}

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


function setJustifyContent(el) {
$(el).css('justify-content','center');
// ou
$(el).css('justifyContent','center');
}

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

La lecture de la propriété peut se faire avec les codes suivants. Comme en Javascript, la couleur est retournée sous la forme rgb(r,g,b) ou rgba(r,g,b,a) si la couleur n'est pas totalement opaque.


function getCalcJustifyContent(el) {
alert($(el).css('justify-content'));
// ou
alert($(el).css('justifyContent'));
}

Simulateur sur un flex-box.


flex-direction :

justify-content :

Flex-box
1
2
3
4
5
6
Grille
1
2
3
4
5
6

Prise en charge par les navigateurs (compatibilité).

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.

Colonne 1
Support de la propriété justify-content par les navigateurs, dans le contexte d'un conteneur flex.
Colonne 2
Support de la propriété justify-content par les navigateurs, dans le contexte d'un conteneur grille.
Colonne 3
Support de la valeur space-evenly pour la propriété justify-content.
Colonne 4
Support des valeurs logiques start et end pour la propriété justify-content.
1
justify-content
(Flex-box)
2
justify-content
(Grid)
3
space-evenly
4
start
end
Estimation de la prise en charge en pourcentage du parc actuel.
96%
95%
97%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que justify-content.

Les spécifications CSS éditées par le W3C sont organisées en modules. justify-content fait partie du Module CSS - Alignement des blocs (CSS Box Alignment Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Disposition des lignes dans un flex-box ou une grille.
Disposition verticale des éléments dans un flex-box ou une grille.
Position verticale de l'un des éléments dans un flex-box ou une grille.
Définit l'espacement entre les colonnes.
Définit les espacements entre les lignes et entre les colonnes (grille, flex-box, colonnes).
Ajuste l'espacement des colonnes dans une grille.
Ajuste l'espacement des lignes et des colonnes dans une grille.
Ajuste l'espacement des lignes dans une grille.
Gère l'alignement horizontal des éléments dans un conteneur grille.
Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.
Disposition des éléments dans un flex-box ou une grille.
Défini le placement des éléments dans leur cellule (grille).
Définit l'alignement d'un élément aussi bien dans la direction inline que dans la direction block.
Définit l'espace entre les lignes d'une grille.