.conteneurCentral { display: flex; flex-flow: row wrap; justify-content: space-around; /*flex-start | flex-end | center | space-between | space-around*/ align-items: stretch; /*flex-start | flex-end | center | baseline | stretch*/ align-content: flex-end; /*flex-start | flex-end | center | space-between | space-around | stretch*/ } .box { line-height: 50px; text-align: center; height: 50px; position: relative; } .size1 { flex: 1 1 100px; } .size2 { flex: 2 1 200px; } .size3 { flex: 0 1 300px; } .color1 { background: #2ecc71; } .color2 { background: #3498db; } .color3 { background: #f1c40f; } .color4 { background: #e74c3c; }
<div class="conteneurCentral"> <div class="box size1 color2">1</div> <div class="box size1 color1">2</div> <div class="box size1 color4">3</div> <div class="box size1 color1">4</div> <div class="box size2 color3">5</div> <div class="box size3 color4">6</div> </div>