Home/ Free Tools/ Flexbox Playground

Flexbox Playground

Visually build flexbox layouts. Adjust container and item properties with instant live preview and clean CSS output.

Container
flex-direction
flex-wrap
justify-content
align-items
align-content
gap
10px
Items (4)
Click an item to edit its individual properties
Item 1
flex-grow
0
flex-shrink
1
flex-basis
order
0
align-self
width
80px
height
80px

Live Preview

Generated CSS

More Free Tools

🎨

Tailwind CSS Converter

Convert vanilla CSS to Tailwind utility classes instantly.
📝

Markdown to HTML

Convert Markdown to clean HTML with GFM support and live preview.
🔗

API Request Builder

Build and test HTTP requests visually with auth and response viewer.
🎯

Color Palette Generator

Generate beautiful color palettes with harmony rules and export.