CSS - Propriété justify-content
Description.
La propriété justify-content
définit l'alignement des enfants dans un flex-box ou le positionnement
des colonnes dans une grille, 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é CSS
flex-direction
.
Bien entendu, justify-content
n'a d'effet que si les éléments ne replissent pas toute la largeur
du flex-box, ou, dans le cas d'une grille, si la largeur des colonnes est inférieure à la largeur
totale de la grille.
Syntaxes pour justify-content
.
- justify-content: flex-start; justify-content: start;
C'est la valeur par défaut. Les éléments internes sont groupés au début du flex-box ou de la grille.
Ces deux valeurs sont presque synonymes à la différence que
flex-start
prend en compte la valeur de la propriétéflex-direction
pour déterminer le départ du container, Tandis questart
considère que le début du container est toujours à gauche. Ce comportement est toutefois différent d'un navigateur à l'autre.Conclusion : utilisez
flex-start
si le container est un flex-box, etstart
si le container est une grille. - justify-content: flex-end; justify-content: end;
Les éléments internes sont groupés à la fin du flex-box ou de la grille.
La différence entre ces deux valeurs est la même que celle entre
flex-start
etstart
exposée plus haut :flex-end
considère la propriétéflex-direction
pour déterminer où est la fin du flex-box. Utilisezflex-end
si le container est un flex-box, etend
si le container est une grille. - justify-content: center;
Les éléments internes sont centrés dans le flex-box ou la grille, sans ajout d'espace entre eux.
- justify-content: space-between;
Les éléments internes sont répartis sur toute la largeur du flex-box ou de la grille. Les espaces entre les éléments sont donc ajustés.
Si
L
est l'espace disponible etn
le nombre d'éléments, l'espaceE
entre les éléments est calculé par la formule :
EspaceE = L / (n-1)
- justify-content: space-around;
Les espaces entre les éléments internes, ainsi que les espaces au début et à la fin sont ajustés pour emplir toute la largeur du flex-box o de la grille, les espaces au début et à la fin étant deux fois moins larges que l'espace entre les éléments.
Espace entre les éléments
E = L / n
Espace au début et à la fine = L / 2n
AvecL
étant l'espace disponible etn
le nombre d'éléments. - justify-content: space-evenly;
Les espaces entre les éléments internes, ainsi que les espaces au début et à la fin sont ajustés pour emplir toute la largeur du flex box ou de la grille, tous ces espaces étant égaux.
Si
L
est l'espace restant etn
le nombre d'éléments, les espaces sont calculés par la formule :
EspaceE = L / (n+1)
- justify-content: left; justify-content: right;
Ces deux valeurs ne sont utilisables que sur un container du type grille. Les éléments internes sont positionnés à gauche ou à droite du container.
- justify-content: stretch;
Cette valeur n'est utilisable que sur un container du type grille. Les éléments internes sont étirés jusqu'à emplir toute la largeur de la grille.
Attention ! Cette valeur ne produit un effet que si les éléments ont une largeur fixée à
auto
. - justify-content:
initial
;La valeur initiale est
start
pour un container grille etflex-start
dans le cas d'un container flex-box. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
justify-content
:Flex-box
justify-content
:Grilles
justify-content
:Valeurs communes
Voir aussi...
Flex-box - Propriétés.
align-content
: Disposition des lignes dans un flex-box ou une grille.align-items
: Disposition verticale des éléments dans un flex-box ou une grille.align-self
: Position verticale de l'un des éléments dans un flex-box ou une grille.display
: Type de l'élément et la façon de l'afficher.flex
: Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.flex-basis
: Détermine la dimension par défaut d'un élément contenu dans un flex-box.flex-direction
: Choisit l'axe principal et l'axe secondaire d'un flex box.flex-flow
: Echaînement des éléments enfant dans un flex-box.flex-grow
: Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.flex-shrink
: Autorise ou non la compression d'un élément contenu dans un flex-box.flex-wrap
: Gestion des retours à la ligne dans un container flex.order
: Ordre des éléments dans un flex-box.
Grilles - Propriétés.
align-content
: Disposition des lignes dans un flex-box ou une grille.align-items
: Disposition verticale des éléments dans un flex-box ou une grille.align-self
: Position verticale de l'un des éléments dans un flex-box ou une grille.grid
: Propriété raccourcis définissant les principaux paramètres d'une grille.grid-area
: Positionne un élément dans une zone nommée de la grille.grid-auto-columns
: Mode de calcul des colonnes 'auto' dans une grille.grid-auto-flow
: Mode de calcul de l'emplacement des éléments dans la grille.grid-auto-rows
: Mode de calcul de la hauteur 'auto' des lignes dans une grille.grid-column
: Numéro de colonne(s) d'un élément dans une grille.grid-column-end
: Numéro de la colonne de fin d'un élément dans une grille.grid-column-gap
: Ajuste l'espacement des colonnes dans une grille.grid-column-start
: Numéro de la colonne de début d'un élément dans une grille.grid-gap
: Ajuste l'espacement des lignes et des colonnes dans une grille.grid-row
: Numéro des lignes d'un élément dans une grille.grid-row-end
: Numéro de la ligne de fin d'un élément dans une grille.grid-row-gap
: Ajuste l'espacement des lignes dans une grille.grid-row-start
: Numéro de la ligne de départ d'un élément dans une grille.grid-template
: Largeur des colonnes et hauteur des lignes d'une grille.grid-template-areas
: Définition de zones nommées dans une grillegrid-template-columns
: Définition du nombre et de la largeur des colonnes d'une grille.grid-template-rows
: Définition du nombre et de la hauteur des lignes d'une grille.justify-items
: Gère l'alignement horizontal des éléments dans le container flex-box ou grille.justify-self
: Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.