Flexbox Playground
Flip flexbox properties, watch real boxes move, copy the CSS.
About this playground
Real boxes in a real flex container; dropdowns for direction, justify, align and wrap; a gap slider; and the CSS underneath updating live, ready to copy. Change one property at a time and watch what it actually does โ the learning method that beats every diagram.
The two-axis mental model
Flexbox confusion has one root: not knowing which axis a property works on. The model that fixes it โ flex-direction picks the MAIN axis; justify-content distributes along it; align-items positions across it; and when direction flips to column, justify and align swap their visible jobs, which is the moment the playground exists to demonstrate. The modern details worth absorbing: gap (spacing without margin hacks โ it reached flexbox in 2021), wrap as the poor man's responsive grid, and space-between versus space-evenly finally distinguishable by eye. When layouts go two-dimensional โ rows AND columns โ the grid generator takes over, and px-to-rem sizes what goes inside.
Frequently asked questions
What's the difference between justify-content and align-items?
justify-content distributes items along the main axis (the flex-direction); align-items positions them across it. Flip direction to column and their visible effects swap โ the playground makes this obvious in one click.
Why doesn't justify-content: center center vertically?
Because with the default row direction, the main axis is horizontal. For vertical centring in a row you want align-items: center โ or both, for the classic perfect-centre.
What does flex-wrap actually do?
Lets items break onto new lines instead of shrinking forever โ turning a row into a lightweight responsive grid. Watch the boxes reflow as you toggle it.
Is gap better than margins between items?
Yes โ gap spaces only BETWEEN items with no first/last exceptions to hack around. It's been supported in flexbox everywhere since 2021.