CSS Flexbox Playground

Adjust flex-direction, justify-content, align-items, gap, and wrap settings with toggle controls and watch the preview rearrange in real time. Each change updates the generated CSS underneath so you can copy a working flexbox snippet directly into your stylesheet.

The playground also exposes per-item properties: flex-grow, flex-shrink, flex-basis, align-self, and order. Pick an item in the preview, change its individual flex behavior, and the output reflects the change with the right child selector.

Flexbox covers 90% of one-dimensional layout needs. For two-dimensional layouts (rows AND columns aligning together), reach for Grid instead — flexbox can fake it but Grid is purpose-built.

The mental model that unlocks flexbox: every flex container has a main axis and a cross axis. flex-direction sets which is which. With row, main is horizontal and cross is vertical; with column it flips. justify-content distributes children along the main axis; align-items aligns them on the cross axis. Once those four words click, every flexbox property makes sense — they're all variations on 'how do items behave on the main axis vs the cross axis.'

Worked example: build a navbar with a logo on the left, a nav cluster centered, and a button on the right. Wrap them in a flex container with justify-content: space-between, and you get the logo at the start, the button at the end — but the nav cluster sits next to one of them, not centered. The fix: wrap each section, give the middle one flex: 1 (which expands it to absorb extra space), and use text-align: center on the middle wrapper. Or skip flex-1 and use auto margins on the middle wrapper for the same effect. Both work; both are common.

Where flexbox surprises you: nested flex containers don't 'see' each other's space. A flex item that's also a flex container computes its size first (based on its own children), then the outer flex container distributes remaining space. This causes the classic 'why is my child overflowing' bug — the inner content forced a minimum width that the outer container can't shrink. Fix with min-width: 0 on the flex item, which overrides the implicit content-based minimum and lets the outer container do its job.

The one trick that solves most flexbox bugs: when something doesn't shrink as expected, add min-width: 0 (for row) or min-height: 0 (for column) on the flex item. By default, flex items have an implicit min-size based on content — long text or large images force the item wider than the container can comfortably hold. The min-width: 0 override removes the implicit floor and lets the container actually distribute space. This single rule fixes the 'overflowing flexbox' bug 80% of the time.