Flexbox
What ? Who ? When ? Why ? Flexbox is a magical tool to flex everything for all devices. It is use for responsive design : it will adapt each box to the size of the ancestor element.
For element to be flex, you have to write display: flex; and then, direct children are flex.
You can try and flex everything in DevTools, open it with F12, select the element you want to modify and here we go !
Demo
You will see below the behavior of my beautiful blue sea blocks :
flex-wrap
Resize here ↘
1
2
3
4
5
6
7
8
9
10
justify-content
Resize here ↘
1
2
3
4
5
6
7
8
9
10
align-items
Resize here ↘
1
2
3
4
5
flex-direction
(row-reverse)
Resize here ↘
1
2
3
4
5
