CSS Flexbox Playground

Visualize flex layouts and copy the CSS

Container

flex-direction

justify-content

align-items

flex-wrap

align-content

gap

Items

Common patterns

Center anything: justify-content: center; align-items: center
Equal columns: set flex: 1 on each child
Push one to the right: set margin-left: auto on that child
Vertical stack: flex-direction: column
Wrapping rows: flex-wrap: wrap with fixed item widths