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 que start 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, et start 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 et start exposée plus haut : flex-end considère la propriété flex-direction pour déterminer où est la fin du flex-box. Utilisez flex-end si le container est un flex-box, et end 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 et n le nombre d'éléments, l'espace E entre les éléments est calculé par la formule :
  Espace E = 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 fin e = L / 2n
  Avec L étant l'espace disponible et n 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 et n le nombre d'éléments, les espaces sont calculés par la formule :
  Espace E = 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 et flex-start dans le cas d'un container flex-box.

• justify-content: unset; justify-content: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

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 grille
• grid-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.

Grilles - Fonctions.

• minmax() : Renvoie une valeur comprise dans une fourchette.
• repeat() : Répète une valeur un certain nombre de fois.