Justify-content

La propriété justify-content est une sous-propriété du module Flexible Box Layout (Flexbox). Elle sert à aligner les lignes d’un container flexible lorsqu’il y a de l’espace sur l’axe principal (main axis), de la même façon que align-content permet d’aligner des items individuels sur l’axe transversal (cross axis).

Elle permet de distribuer l'espace qui reste lorsque soit les items sont inflexibles, soit ils ont atteint leur taille maximale. Elle permet aussi d'exercer un certain contrôle sur l'alignement des items lorsqu'ils dépassent de la ligne.

La propriété justify-content accepte 5 valeurs :

  • flex-start (par défaut) : les items sont regroupés au début de la ligne
  • flex-end : les items sont regroupés à la fin de la ligne
  • center : les items sont regroupés au centre de la ligne
  • space-between : les items sont répartis de manière égale sur la ligne ; le premier est au début de la ligne, le dernier est à la fin
  • space-around : les items sont répartis de manière égale sur la ligne avec le même espacement entre chacune

Le schéma suivant permet de mieux comprendre la façon dont les lignes s’empilent dans un container flexible selon la valeur donnée à justify-content :

image

Syntaxe

//CSS
justify-content: flex-start | flex-end | center | space-between | space-around


.flex-item {
  justify-content: center;
}

Démo

La démo suivante montre la façon dont les lignes sont empilées selon la valeur de la propriété align-content :

  • Dans la liste rouge, valeur = flex-start
  • Dans la liste jaune, valeur = flex-end
  • Dans la liste bleue, valeur = center
  • Dans la liste verte, valeur = space-between
  • Dans la liste rose, valeur = space-around
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

À lire également dans La Cascade :

Flexbox, guide complet

Autres ressources à consulter sur ce sujet :


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.