CSS : justify-content - Web Formation

Description

La propriété justify-content permet d’aligner et de répartir l’espace entre les éléments d’un conteneur Flexbox (display: flex) ou Grid (display: grid) sur l’axe principal (axe horizontal par défaut).

Cette propriété est très utilisée pour centrer des éléments, créer des espacements fluides ou répartir des items dans une barre de navigation.

L’axe principal dépend de flex-direction :

Valeurs possibles

Voici les valeurs les plus courantes pour justify-content :

Valeur	Exemple	Description
`flex-start`	`justify-content: flex-start;`	Les éléments sont alignés au début de l’axe principal (valeur par défaut).
`flex-end`	`justify-content: flex-end;`	Les éléments sont alignés à la fin de l’axe principal.
`center`	`justify-content: center;`	Les éléments sont centrés sur l’axe principal.
`space-between`	`justify-content: space-between;`	Le premier élément est collé au début, le dernier à la fin, l’espace restant est réparti entre les éléments.
`space-around`	`justify-content: space-around;`	Chaque élément reçoit un espace égal autour de lui.
`space-evenly`	`justify-content: space-evenly;`	L’espace est parfaitement égal entre tous les éléments et les bords.

Exemple

Démonstration interactive : justify-content

Choisissez une valeur

Aperçu

Alignement au début de la flexbox

Code HTML & CSS

<div class="demo">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<div class="demo">    <span></span>    <span></span>    <span></span>    <span></span></div>

.demo { 
    display: flex; 
    justify-content: flex-start;  /* Alignement au début de la flexbox */
} 
.demo span { 
    width: 40px; 
    height: 40px;
    margin: 2px; 
    background: #0088a3; 
}

.demo {     display: flex;     justify-content: flex-start;  /* Alignement au début de la flexbox */} .demo span {     width: 40px;     height: 40px;    margin: 2px;     background: #0088a3; }

.demo { 
    display: flex; 
    justify-content: flex-end;  /* Alignement à la fin de la flexbox */
} 
.demo span { 
    width: 40px; 
    height: 40px;
    margin: 2px; 
    background: #0088a3; 
}

.demo {     display: flex;     justify-content: flex-end;  /* Alignement à la fin de la flexbox */} .demo span {     width: 40px;     height: 40px;    margin: 2px;     background: #0088a3; }

.demo { 
    display: flex; 
    justify-content: center;  /* Alignement au centre de la flexbox */
} 
.demo span { 
    width: 40px; 
    height: 40px;
    margin: 2px; 
    background: #0088a3; 
}

.demo {     display: flex;     justify-content: center;  /* Alignement au centre de la flexbox */} .demo span {     width: 40px;     height: 40px;    margin: 2px;     background: #0088a3; }

.demo { 
    display: flex; 
    justify-content: space-between;  /* Répartition des flex-items entre les extrémités */
} 
.demo span { 
    width: 40px; 
    height: 40px;
    margin: 2px; 
    background: #0088a3; 
}

.demo {     display: flex;     justify-content: space-between;  /* Répartition des flex-items entre les extrémités */} .demo span {     width: 40px;     height: 40px;    margin: 2px;     background: #0088a3; }

.demo { 
    display: flex; 
    justify-content: space-around;  /* Répartition des espaces autours des flex-items */
} 
.demo span { 
    width: 40px; 
    height: 40px;
    margin: 2px; 
    background: #0088a3; 
}

.demo {     display: flex;     justify-content: space-around;  /* Répartition des espaces autours des flex-items */} .demo span {     width: 40px;     height: 40px;    margin: 2px;     background: #0088a3; }

.demo { 
    display: flex; 
    justify-content: space-evenly;  /* Répartition des espaces autours des flex-items de manière égale */
} 
.demo span { 
    width: 40px; 
    height: 40px;
    margin: 2px; 
    background: #0088a3; 
}

.demo {     display: flex;     justify-content: space-evenly;  /* Répartition des espaces autours des flex-items de manière égale */} .demo span {     width: 40px;     height: 40px;    margin: 2px;     background: #0088a3; }

Remarques

justify-content agit sur l’axe principal. Pour l’autre axe, il faut utiliser la propriété align-items.
Pour que les espacements soient visibles, il faut que la largeur totale des éléments soit inférieure à celle du conteneur.
Avec flex-direction: column, l’axe principal devient vertical : justify-content aligne donc les éléments verticalement.