Démo flexbox : flex-direction

by Arnaud

HTML

Conteneur sans "wrap"
<div class="conteneur">
<div class="elementConteneur elementConteneur1">
Element 1
</div>
<div class="elementConteneur elementConteneur2">
Element 2
</div>
<div class="elementConteneur elementConteneur3">
Element 3 long
</div>
<div class="elementConteneur elementConteneur4">
Element 4
</div>
<div class="elementConteneur elementConteneur5">
Element 5
</div>

</div>
conteneur avec flex-wrap : wrap;
<div class="conteneur2">
<div class="elementConteneur elementConteneur1">
Element 1
</div>
<div class="elementConteneur elementConteneur2">
Element 2
</div>
<div class="elementConteneur elementConteneur3">
Element 3 long
</div>
<div class="elementConteneur elementConteneur4">
Element 4
</div>
<div class="elementConteneur elementConteneur5">
Element 5
</div>

</div>

CSS

.conteneur{
  display:flex;
  background:#eee;
padding:10px;
border: 5px dotted #666;
width:250px;
}
.conteneur2{
  display:flex;
  background:#eee;
padding:10px;
border: 5px dotted #666;
flex-wrap:wrap;
width:250px;

}

.elementConteneur{
  border:1px solid #ccc;
  padding:10px;
}