Interactive Flexbox
This website helps you understand CSS flexbox properties better by letting you play around with them!
Use TAB and SHIFT+TAB to navigate through this website, confirm a choice with ENTER
Flex direction
1° item
2° item
3° item
Copied!
Justify Content
[flex-direction is set to row]
1°
2°
3°
Copied!
Align Items
[flex-direction is set to row]
1°
2°
3°
Copied!
Justify Content
+
Align Items
[flex-direction is set to row]
Justify Content
Align Items
1°
2°
3°
Copied!
Flex-Grow
Each number represents how much the Nth box occupies in the container
Enter positive numbers between 1 and 99
1°
2°
3°
33%
33%
33%