Démo flexbox : justify-content

by Arnaud

HTML

flex-start (valeur par défaut)
<div class="conteneur conteneur1">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois
</div>


</div>

<br>
flex-end
<div class="conteneur conteneur2">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois
</div>


</div>
<br>
center
<div class="conteneur conteneur3">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois
</div>


</div>

<br>
space-around
<div class="conteneur conteneur4">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois
</div>


</div>

<br>
space-between
<div class="conteneur conteneur5">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois
</div>


</div>

<br>
space-evenly
<div class="conteneur conteneur6">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois
</div>


</div>

CSS

.conteneur{
  display:flex;
  background:#eee;
padding:10px;
border: 5px dotted #666;
width:300px;
flex-direction:column;
height:500px
}





.elementConteneur {

    border:1px solid #ccc;
  padding:10px;
}


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

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

.conteneur3{
 justify-content:center;
}

.conteneur4{
     justify-content:space-around;

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

}
.conteneur6{
     justify-content:space-evenly;

}