Flexbox Playground
Visually experiment with every CSS Flexbox property. Add items, tweak container and item settings, and instantly copy the generated CSS and HTML.
Click an item in the preview to select it
How to Use
- Choose a preset or set container properties manually
- Add or remove flex items with the buttons
- Click any item to select it and adjust its individual properties
- Watch the live preview update instantly
- Copy the generated CSS, HTML, or Tailwind code
Features
- All Flexbox container properties with live preview
- Per-item flex-grow, shrink, basis, align-self, order
- 8 common layout presets to start from
- Resizable container and individual items
- CSS, HTML, and Tailwind CSS output tabs
- Click-to-select items for individual control
- Color-coded items for easy identification
What is Flexbox Playground?
Flexbox Playground is a free visual CSS Flexbox builder that lets you experiment with every flex container and item property in real time. Instead of writing CSS blind and refreshing your browser, you adjust dropdowns and sliders and see the layout update instantly.
It generates clean CSS, semantic HTML, and Tailwind CSS classes you can copy directly into your project. No signup, no uploads, everything runs in your browser.
How to Use This Tool
Follow these steps to build a flexbox layout visually:
- Pick a preset or start fresh - Click one of 8 presets (Centered Row, Holy Grail, Sidebar, Navbar, etc.) or configure properties manually.
- Adjust container properties - Set flex-direction, justify-content, align-items, flex-wrap, align-content, and gap using the dropdowns and slider in the left panel.
- Add and configure items - Click "Add" to create flex items (up to 12). Click any item in the preview to select it, then tweak its flex-grow, flex-shrink, flex-basis, align-self, order, and dimensions.
- Copy the output - Switch between CSS, HTML, and Tailwind tabs below the preview. Click "Copy" or press Ctrl+Enter to copy the generated code.
Key Features
- Complete property coverage - All 6 container properties (direction, justify, align, wrap, align-content, gap) and 5 item properties (grow, shrink, basis, align-self, order).
- 8 layout presets - Centered Row, Column Stack, Space Between, Wrap Grid, Holy Grail, Sidebar, Navbar, and Card Row. One click to load common patterns.
- Triple output format - Get CSS classes, semantic HTML, or Tailwind utility classes. Each format is independently copyable.
- Per-item visual controls - Click any item in the preview to select it. Resize with sliders, adjust flex properties, reorder items.
- Keyboard shortcuts - Ctrl+Enter to copy, Escape to reset, + to add items, - to remove.
Common Use Cases
Frontend developers use this to prototype navigation bars, card grids, sidebar layouts, and centering patterns before writing code. It is particularly useful when you need to visually compare how different justify-content or align-items values affect a layout. Design-to-code handoff is faster because you can match a mockup visually then copy the exact CSS. The Tailwind output tab makes it useful for teams using utility-first CSS frameworks.
Frequently Asked Questions
What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (horizontal in a row, vertical in a column). align-items controls alignment along the cross axis (vertical in a row, horizontal in a column). Use the playground to toggle between them and see the difference instantly.
How do I center a div with flexbox?
Set the container to display:flex with justify-content:center and align-items:center. The "Centered Row" preset does exactly this. You can also center a single child by giving the container these two properties, which works regardless of the child's size.
What does flex-grow do?
flex-grow determines how much extra space an item takes up relative to other items. A value of 0 means the item stays at its base size. A value of 1 means it expands to fill available space. If two items both have flex-grow:1, they split the extra space equally. Try it in the playground by selecting an item and changing its grow value.
Can I use the generated code in production?
Yes. The generated CSS and HTML are clean, standards-compliant, and production-ready. The CSS uses standard flexbox properties supported by all modern browsers. The Tailwind output uses official utility classes. Copy and paste directly into your project.
What is the Holy Grail layout?
The Holy Grail layout is a classic web design pattern with a fixed-width left sidebar, a fluid center column, and a fixed-width right sidebar. It is called "holy grail" because it was notoriously difficult to implement before flexbox. With flexbox, you set the two sidebars to flex-shrink:0 with a fixed basis, and the center to flex-grow:1 so it fills the remaining space.