Flexbox Playground
Learn Flexbox by Playing
Flexbox arranges items in a row or column. Drag sliders, click options, and watch the layout change. No code typing needed.
Flex Container Basics
These properties go on the parent container. They control how child items are laid out.
What is Flexbox?
Add display: flex to any container and its children become flexible items. They line up in a row by default. That's it — you just "turned on" Flexbox!
Which way do items flow?
How are items spaced along the flow direction?
How are items positioned perpendicular to the flow?
Should items wrap to the next line?
Space between items
Main axis: → Cross axis: ↓
Alignment Visualizer
See exactly how justify-content and align-items interact. The blue lines show the main axis and cross axis.
The Two Axes
justify-content controls the main axis (the direction items flow). align-items controls the cross axis (perpendicular to the flow). In a row, main = horizontal, cross = vertical. In a column, they swap!
flex-start: Items packed at the start of the main axis. This is the default.
— Main axis (justify-content) | Cross axis (align-items)
Individual Item Controls
These properties go on individual child items, not the container. Control how each item grows, shrinks, and aligns.
flex-grow, flex-shrink, flex-basis
flex-grow: How much extra space should this item take? 0 = don't grow, 1 = take equal share. flex-shrink: Should this item shrink when space is tight? flex-basis: Starting size before growing/shrinking. align-self: Override the container's align-items for just this one item.
Adjust each item's flex properties independently:
Real-World Layouts
Click any layout to see it built with Flexbox. Study the code, then copy it.
Flexbox is everywhere
Navigation bars, card rows, footers, form layouts, media objects — almost every piece of a modern website uses Flexbox. These are layouts you'll build over and over.
Click a layout above to see it