Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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)

    Valeur space-between pour justify-content

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

    Valeur space-around pour justify-content

  • 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)

    Valeur space-evenly pour justify-content

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

justify-content :
Flex-box
 
justify-content :
Grilles

 
justify-content :
Valeurs communes
Flex-box
1
 
2
 
 
3
Grille
1
2
3
4
5
6

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.