justify-content
Répartit les éléments le long de l’axe principal d’un conteneur flex ou grid.
- Valeur initiale
normal- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs flex, conteneurs grid et conteneurs multi-colonnes
- JavaScript
element.style.justifyContent = "center"
Exemple
#.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
}<nav class="toolbar stage">
<strong>CodeWorlds</strong>
<span>Cours · Documentation · Collections</span>
</nav>Définition et utilisation
#La propriété justify-content décide quoi faire de l’espace libre sur l’axe principal du conteneur. En Flexbox, avec flex-direction: row, l’axe principal est horizontal, donc les éléments se déplacent vers la gauche, vers la droite, se regroupent au centre ou se répartissent avec des espaces égaux.
Elle n’agit que s’il reste de l’espace libre. Si les éléments remplissent tout le conteneur (par exemple avec flex-grow: 1), changer sa valeur ne change rien.
Dans une grille CSS Grid, la même propriété répartit des colonnes entières à l’intérieur du conteneur, lorsque la grille est plus étroite que le conteneur.
Syntaxe
#justify-content: normal | flex-start | flex-end | center | space-between | space-around | space-evenly | start | end;Valeurs
#- Les éléments se placent au début de l’axe principal. Avec le sens d’écriture habituel en ligne, c’est le bord gauche.
- Les éléments se déplacent vers la fin de l’axe principal.
- Les éléments se regroupent au centre, et l’espace libre se répartit également de chaque côté.
- Le premier élément se place au début, le dernier à la fin, et le reste de l’espace se répartit également entre les éléments.
- Chaque élément reçoit le même espace de chaque côté, donc les espaces près des bords sont deux fois plus petits qu’entre les éléments.
- Tous les espaces sont identiques : entre les éléments et près des bords du conteneur.
Valeurs en pratique
#flex-start
.demo { justify-content: flex-start; }flex-end
.demo { justify-content: flex-end; }center
.demo { justify-content: center; }space-between
.demo { justify-content: space-between; }space-around
.demo { justify-content: space-around; }space-evenly
.demo { justify-content: space-evenly; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour centrer un seul élément horizontalement et verticalement,
display: flex; justify-content: center; align-items: center;suffit. - Plutôt que des marges entre les éléments, utilisez
gap.justify-contentne s’occupera plus que du reste de l’espace libre.
Entrées associées
#- align-itemsAligne les éléments sur l’axe secondaire d’un conteneur flex ou grid.
- flex-directionDéfinit le sens de l’axe principal : les éléments flex s’alignent en ligne ou en colonne.
- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
- align-contentRépartit des lignes entières d’éléments sur l’axe secondaire du conteneur.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.