justify-content en CSS : répartir l'espace sur l'axe principal sans une seule marge

Une fois des éléments alignés sur l'axe principal d'un conteneur flex, une question reste ouverte : que faire de l'espace qui reste, s'il en reste ? justify-content répond précisément à cette question, en distribuant cet espace disponible selon six comportements distincts.

On la rencontre dès qu'il faut espacer des boutons régulièrement, coller un élément à chaque extrémité d'une barre, ou centrer un petit groupe d'éléments dans un espace plus large, sans calculer la moindre marge à la main.

Définition

justify-content est la propriété qui répartit l'espace disponible entre les éléments d'un conteneur Flexbox, le long de son axe principal, c'est-à-dire le sens choisi par flex-direction. Elle ne s'applique qu'au conteneur, jamais directement aux enfants.

.conteneur {
  display: flex;
  justify-content: center;
}

Cette déclaration regroupe tous les éléments flexibles au centre du conteneur, en laissant un espace égal de chaque côté du groupe.

Les six valeurs et leur effet

Chaque valeur traite l'espace disponible différemment, entre regroupement et distribution régulière.

La différence entre les trois valeurs space- se joue entièrement sur les bords du conteneur. space-between ne laisse aucun espace avant le premier élément ni après le dernier. space-around laisse un espace, mais deux fois plus petit que celui entre deux éléments, puisque chaque élément ne reçoit qu'une demi-part de son côté extérieur. space-evenly corrige cette irrégularité et impose le même espace partout, bords compris.

Un exemple concret

Une barre d'action avec un bouton d'annulation à gauche et un bouton de validation à droite illustre bien l'usage le plus courant de justify-content.

.barre-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

space-between pousse les deux boutons vers les extrémités opposées de la barre, quel que soit le nombre de boutons intermédiaires ajoutés entre eux : l'espace se recalcule automatiquement.

Le piège de la direction

justify-content agit sur l'axe principal, pas sur l'axe horizontal par définition. Sur un conteneur avec flex-direction: column, la même propriété justify-content: center centre les éléments verticalement, pas horizontalement.

Quand il n'y a plus d'espace à distribuer

Toutes les valeurs de justify-content reposent sur une hypothèse implicite : qu'il reste de l'espace disponible dans le conteneur, une fois tous les éléments placés côte à côte. Si la somme des largeurs des éléments dépasse déjà la largeur du conteneur, il n'y a plus rien à répartir, et space-between, space-around ou space-evenly se comportent alors comme flex-start, sans provoquer d'erreur ni de message dans la console.

Ce cas se rencontre souvent avec un contenu dynamique, comme une liste de filtres dont le nombre varie selon les résultats d'une recherche : au-delà d'un certain nombre d'éléments, l'espacement soigneusement choisi disparaît purement et simplement, remplacé par un simple alignement au début de la ligne.

Questions fréquentes

justify-content agit sur l'axe principal du conteneur flex, celui défini par flex-direction. align-items agit sur l'axe secondaire, perpendiculaire au premier. Sur une ligne classique, justify-content gère l'horizontal et align-items gère le vertical, mais ces rôles s'inversent si flex-direction passe en column.

Oui, la propriété existe aussi dans un contexte de grille, où elle répartit les colonnes de la grille à l'intérieur du conteneur si celles-ci occupent moins de largeur que l'espace disponible. Son comportement reste conceptuellement le même : distribuer l'espace restant selon la valeur choisie.

Avec un seul élément flexible dans le conteneur, il n'y a qu'un seul bloc à positionner, et space-between le colle systématiquement contre le début de l'axe, faute d'un deuxième élément avec lequel répartir l'espace. Pour centrer un élément unique, la valeur center convient mieux.