6XC

CSS Flexbox Playground

Tune flex-direction, justify-content, align-items, wrap and gap on live boxes, then copy the container CSS.

845 views

1
2
3
4
5

Flexbox in a Nutshell

Setting display: flex turns a container into a one-dimensional layout engine. justify-content distributes items along the main axis, align-items aligns them on the cross axis, flex-direction picks the axis, and gap spaces items without margins. Play with the controls and watch the numbered boxes rearrange live.

Frequently Asked Questions

How do I center something perfectly?

The famous three lines: display: flex; justify-content: center; align-items: center; — horizontal and vertical centering in one go.

Flexbox or Grid?

Flexbox excels at one-dimensional rows or columns that size to content (toolbars, nav, card rows). Grid is built for two-dimensional layouts with explicit tracks. They combine well.

Similar Tools

CSS Gradient Generator Design linear, radial and conic CSS gradients with live preview and copy the code. Generate CSS Box Shadow Generator Design a box-shadow visually — offsets, blur, spread, color, opacity and inset — with live preview. Generate CSS Border Radius Generator Round each corner individually or all at once, in px or %, with live preview and copyable CSS. Generate CSS Text Shadow Generator Design a text-shadow with offsets, blur, color and opacity — live preview on sample text. Generate