CSS Flexbox Playground
Interactive playground to learn and generate Flexbox layouts
Layout settings
Preset layouts
Per-item overrides
Select an item in the preview or the list to edit its properties.
Flexbox quick reference
Main axis
justify-content controls alignment along the main axis (determined by flex-direction).
Cross axis
align-items controls alignment along the cross axis (perpendicular to flex-direction).
Multi-line
align-content only applies when flex-wrap is set to wrap or wrap-reverse with multiple lines.
Live preview
Generated CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Change the settings or select an item. The preview and CSS update together.
About CSS Flexbox Playground
The CSS Flexbox Playground is a visual, interactive tool for learning and experimenting with CSS Flexbox layouts. Flexbox (Flexible Box Layout) is one of the most powerful and widely used CSS layout modules, designed to arrange items within a container with flexible, responsive behavior. This tool lets you manipulate every flex container and flex item property in real time and see exactly how your layout changes.
Key Features
- Full control over all flex container properties: flex-direction, flex-wrap, justify-content, align-items, align-content, and gap
- Per-item overrides: order, flex-grow, flex-shrink, flex-basis, and align-self
- Live visual preview with colored, numbered items and a dashed container boundary
- Preset layouts including Navigation Bar, Card Grid, Holy Grail, Centered Content, and Sidebar Layout
- Auto-generated CSS code with one-click copy functionality
- Dynamic item count control from 1 to 12 items
- Click-to-select items for per-item property editing
- Dark mode support for comfortable use in any lighting condition
Understanding Flexbox Properties
Flexbox works along two axes: the main axis (defined by flex-direction) and the cross axis (perpendicular to the main axis). The justify-content property distributes space along the main axis, while align-items handles alignment on the cross axis. When flex-wrap allows wrapping onto multiple lines, align-content controls spacing between those lines. Each flex item can override its alignment with align-self, control its growth and shrinkage ratios, and set a base size with flex-basis.
Common Flexbox Layout Patterns
Flexbox excels at building navigation bars, centering content both horizontally and vertically, creating card grids that wrap responsively, building sidebar layouts with a fixed sidebar and fluid main content, and implementing the classic Holy Grail layout with header, footer, sidebar, and main content areas. Use the preset buttons to instantly see these patterns in action.
Who Is This Tool For?
- Web developers learning CSS Flexbox for the first time
- Frontend engineers prototyping responsive layouts quickly
- UI/UX designers who want to visualize flex layouts before writing code
- Students studying CSS layout techniques for coursework or interviews
- Educators demonstrating Flexbox concepts in workshops or classrooms
- Anyone who needs to quickly generate Flexbox CSS for their projects