Flexbox Playground
Experiment with CSS Flexbox layout interactively and copy the code.
Learning flexbox by moving things
Flexbox lays out items in a row or column with flexible sizing and alignment, but its properties are far easier to understand by playing than by reading. This lets you adjust the flex properties and watch items rearrange live, then copy the CSS, so you can find the layout you want and understand why it works.
Toggle the properties and see the layout respond.
The two axes that confuse everyone
The thing that trips people up with flexbox is that it has two axes — a main axis along which items flow, and a cross axis across it — and which property aligns which depends on the direction. Justify-content works along the main axis, align-items across it, and switching from a row to a column swaps what those mean, which is the source of endless confusion. Seeing items actually move as you change the properties makes this click in a way documentation rarely does. Once the two axes make sense, flexbox becomes the intuitive workhorse for centring, spacing and aligning that it is meant to be.
Questions & answers
What is flexbox best for?
Laying out items in a single row or column with flexible sizing and alignment — the go-to for centring, spacing and aligning.
Why is flexbox confusing at first?
It has a main axis and a cross axis, and which property aligns which flips when you switch between a row and a column. Seeing it move makes it clear.
Is anything uploaded?
No. It runs entirely in your browser.