Propriété CSS : justify-content

La propriété CSS FlexBox Parente JUSTIFY-CONTENT permet de positionner les blocs enfants.

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

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 :

HTML :

<section class="section1">
  <div></div>
  <div></div>
  <div></div>
</section>

<section class="section2">
  <div></div>
  <div></div>
  <div></div>
</section>

<section class="section3">
  <div></div>
  <div></div>
  <div></div>
</section>

<section class="section4">
  <div></div>
  <div></div>
  <div></div>
</section>

<section class="section5">
  <div></div>
  <div></div>
  <div></div>
</section>

CSS :

*{
  margin:0;
  padding:0;
}

section {
  display:flex;
  margin:10px;
}

div{
  height:100px;
  width:25%;
}

section div:nth-child(1){
  background-color:blue;
}

section div:nth-child(2){
  background-color:red;
}

section div:nth-child(3){
  background-color:green;
}

.section1 {
  justify-content:flex-start;
}

.section2 {
  justify-content:flex-end;
}

.section3 {
  justify-content:center;
}

.section4 {
  justify-content:space-between;
}

.section5 {
  justify-content:space-around;
}

Résultat:

Laisser un commentaire Annuler la réponse