CSS Flexbox Generator

Compose a CSS flex layout in your browser. Pick container and item properties; watch the preview update live; copy the finished rule. Pure client-side, no upload.

Container

flex-direction flex-wrap justify-content align-items align-content gap

Items in preview Selector

Presets

Items (applied to every preview item)

flex-grow flex-shrink flex-basis order align-self

Preview

CSS

Quick reference

flex-direction: Main axis. row → left→right; column → top→bottom; *-reverse flips.
flex-wrap: Wrap to a new line when items overflow.
justify-content: Distribution along the main axis. space-between = nav-bar.
align-items: Cross-axis alignment per item. Default stretch.
align-content: Row distribution on the cross axis. No effect without wrap.
gap: Space between items. Modern alternative to margin hacks.
flex-grow / -shrink / -basis: How items claim leftover space, give it back, and their starting size.
order: Visual order; default 0; negatives move earlier.
align-self: Per-item override of align-items; auto inherits.