↔️ CSS Flexbox Playground

Explore real flexbox controls side by side: direction, wrapping, gap and alignment update the preview immediately, then a copyable CSS block records the exact settings. Use it to build nav rows, centred content or responsive card strips.

Presets:
Flexbox in one sentence

Flexbox lays items out along one main axis. justify-content controls distribution on that axis; align-items controls the cross axis. When the direction changes from row to column, those axes change too.