// css · tool

Flexbox Playground

Change the Flexbox properties below and watch the layout react in real time. Copy the generated CSS when it looks right — no sign-up, nothing stored. New to Flexbox? Start with CSS Grid vs Flexbox.

flex-direction justify-content align-items flex-wrap align-content gap (px): 12 items: 5

Generated CSS

How Flexbox works in one minute

Flexbox lays out items along a single axis. flex-direction sets that axis (a row or a column). justify-content distributes the items along the axis, while align-items aligns them across it. Turn on flex-wrap and items spill onto new lines, at which point align-content spaces those lines. gap adds consistent spacing without margins. For two-dimensional layouts (rows and columns at once), reach for CSS Grid instead — the trade-offs are covered in CSS Grid vs Flexbox.