Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
.flex {display: flex; width: 400px; height: 400px; border: 1px solid black; margin: auto; flex-direction: row; justify-content: space-between; flex-flow: wrap;} div {height: 50px; outline: 2px solid red; text-align: center; flex: 1 1 auto;} .for {mar gin: auto; align-self: flex-end ; order: -1;}
<!— Main axis alignment is justify-content. Cross alignment is align-items. Play with the child controls in .for to understand order and power of auto margins. —> <div class=flex> <div>Box 1</div> <div class="for" >Box 2 </div> <div >Box 3 <!— turn this comment into text, remove height in div and wrap is on in .flex. The extra content changes the layout as flex automatically distributes the content. —></div> <div>Box 4</div> <div class="for" >Box 5</div> <div >Box 6</div> </div>