Flexbox Playground

Interactive CSS Flexbox playground. Tweak container and item properties, preview the layout live, then copy the CSS or share a link.

Features

• Live preview with container + item controls
• Layout presets (Navbar, Centered, Wrap, Grow, Sidebar)
• flex-grow, flex-shrink, flex-basis, align-self, and order
• Generated CSS with one-click copy
• Shareable URLs that restore a layout
• Local persistence across reloads
• Responsive desktop sidebar + mobile bottom controls

Getting started

npm install
npm run dev

Build for production:

npm run build
npm run preview