Flexbox is powerful but the properties can be confusing. I built a visual playground where you adjust every flex property and see the result instantly.
Properties you can control:
- flex-direction (row, column, reverse)
- flex-wrap (nowrap, wrap)
- justify-content (6 options)
- align-items (5 options)
- align-content (6 options)
- gap (0-40px slider)
- Number of items (1-12)
The CSS updates live as you change values. Copy with one click.
More CSS tools:
Full toolkit: devtools-site-delta.vercel.app
Top comments (0)