CSS Flexbox Playground
1
2
3
4
5
Understand and try out Flexbox
Flexbox is the most powerful layout tool in CSS – but the many properties are hard to remember without trying them. In the playground you set them via menus and instantly see how the boxes arrange themselves. The matching CSS code appears below.
- flex-direction: orientation of the main axis (row or column).
- justify-content: distribution along the main axis; align-items: across it.
- wrap & gap: wrapping when space runs out and spacing between elements.