justify-content - Propriété CSS
Résumé des caractéristiques de la propriété justify-content
normal
| stretch
| left
| center
| right
| start
| end
| flex-start
| flex-end
| space-around
| space-between
| space-evenly
normal
justify-content
passe d'une valeur à l'autre sans transition.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.
- 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
etflex-end
en fonction deflex-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 valeurflex-start
.123456flex-direction:row;
justify-content:flex-start;123456flex-direction:row-reverse;
justify-content:flex-start;Remarque : les valeurs
start
etend
sont généralement acceptées sur un flex-box, mais ne prennent pas en compte la direction d'écriture définie parflex-direction
.
Il en est de même pour les valeursleft
etright
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.
123456justify-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.
- 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.
- 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.
- 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.
- justify-content: normal;
La valeur
normal
est traitée comme la valeurstart
(voir plus loin).123456justify-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é parjustify-items
. Dans nos exemples, les éléments sont centrés dans leur colonne.123456justify-content:start;
Remarque : les valeurs
flex-start
etflex-end
sont généralement acceptées par les navigateurs, mais ces derniers les traitent commestart
etend
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
.123456justify-content:left;
- justify-content: center;
Les colonnes sont groupées au centre du conteneur grille.
123456justify-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 valeurstretch
appliquée àjustify-content
sera donc également sans effet.123456grid-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 etn
le nombre de colonnes, l'espacee
entre les colonnes est calculé par la formule :
Espace entre colonnese = D / (n-1)
- 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 fine = D / 2n
AvecD
étant l'espace disponible etn
le nombre de colonnes. - 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 etn
le nombre de colonnes, les espaces sont calculés par la formule :
Espacee = D / (n+1)
- justify-content: safe ...; justify-content: unsafe ...;
Les modificateurs
safe
etunsafe
peuvent être ajoutés avant le mot clé définissant l'alignement lorsque ce denier eststart
,end
,center
,right
ouleft
. Le rôle desafe
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 avecstart
.
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é.
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.
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
:
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
.
justify-content
par les navigateurs, dans le contexte d'un conteneur flex.
justify-content
par les navigateurs, dans le contexte d'un conteneur grille.
space-evenly
pour la propriété justify-content
.
start
et end
pour la propriété justify-content
.
justify-content
(Flex-box)
justify-content
(Grid)
space-evenly
start
end
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.