CSS Flexbox Generator
Visual CSS Flexbox playground and code generator. Set flex properties and get instant live preview with copy-ready CSS.
CSS Flexbox Generator
Visually configure flexbox containers and items. See your changes live, then copy the generated CSS.
CSS Flexbox Quick Reference
- flex-direction: row (default) | column — sets the main axis direction
- justify-content: aligns items along the main axis
- align-items: aligns items along the cross axis (single line)
- align-content: aligns lines when there are multiple rows/columns
- flex-grow: item's ability to grow relative to others (0 = no grow)
- flex-shrink: item's ability to shrink (1 = can shrink, 0 = never)
- flex-basis: initial size before space distribution (auto, px, %)