Flexbox Playground
Visually configure a CSS flexbox container and copy the generated CSS
Flex settings
Examples
Centered hero section
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 16px;
}Centers items both horizontally and vertically — the classic pattern for a hero or modal.
Responsive wrapping card gallery
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
gap: 24px;
}Cards wrap to new rows automatically and all stretch to the same height, ideal for a responsive grid of equal-height cards.
Details
CSS Flexbox is a one-dimensional layout model that makes it easy to align and distribute space among items in a container. This playground lets you tweak all the major flex-container properties — direction, justification, alignment, wrapping, and gap — and see numbered items react in real time. Everything runs locally in your browser; no data is ever sent anywhere.
Examples
Center a child in a column
flex-direction: column
justify-content: center
align-items: centerdisplay: flex;
flex-direction: column;
justify-content: center;
align-items: center;Column direction stacks children vertically; centering on both axes puts the child in the middle of the container.
Space items evenly across a row
flex-direction: row
justify-content: space-between
gap: 16pxdisplay: flex;
flex-direction: row;
justify-content: space-between;
gap: 16px;space-between pushes the first and last items to the edges and distributes the rest, with a fixed gap between each.
About this tool
The Flexbox Playground is a visual configuration tool for CSS Flexbox containers. Adjust flex-direction, justify-content, align-items, flex-wrap, and gap through simple dropdowns and a slider, then watch numbered items react in the live preview — all without writing a single line of CSS by hand.
The generated output is a complete, production-ready .flex-container { display: flex; … } rule that you can paste straight into any stylesheet. Because all processing happens locally in your browser, no data ever leaves your device.
Whether you are learning how justify-content differs from align-items, prototyping a navigation bar, or debugging a wrapping layout, the Flexbox Playground gives you immediate visual feedback so you can apply Flexbox with confidence.
How to use
Configure your flex container
Use the dropdowns to choose flex-direction, justify-content, align-items, and flex-wrap, and drag the Gap slider. The live preview updates instantly.
Use a preset to get started quickly
Click a preset chip — Centered, Space between nav, Vertical stack, or Wrapping gallery — to load a common pattern, then fine-tune it.
Copy and use the generated CSS
Click Copy CSS to copy the complete .flex-container rule and paste it into your stylesheet.
Use cases
Prototyping component layouts
Dial in align/justify/gap visually, then copy the exact CSS into your component instead of guessing property combinations.
Learning Flexbox interactively
See how each property reflows children, which is faster than reading the spec cold.
Debugging a misaligned layout
Reproduce a broken layout in the playground, toggle one property at a time, and find the value that fixes it.
Flex-container properties at a glance
| Property | Options |
|---|---|
| flex-direction | row · row-reverse · column · column-reverse |
| justify-content | flex-start · center · flex-end · space-between · space-around · space-evenly |
| align-items | stretch · flex-start · center · flex-end · baseline |
| flex-wrap | nowrap · wrap · wrap-reverse |
| gap | 0 – 48 px |
Common mistakes
Mistake:Confusing justify-content with align-items.
Fix:justify-content works along the main axis (set by flex-direction); align-items works on the cross axis. Swap them when a layout looks rotated 90° from intent.
Mistake:Setting vertical centering on a row and seeing no effect.
Fix:In a row the cross axis is vertical, so vertical centering uses align-items, not justify-content. Check which axis flex-direction selected.
Mistake:Expecting gap to work without a flex container.
Fix:The gap property applies between flex items only when display: flex (or grid) is set on the parent.
Frequently asked questions
Related guides
Browser Compatibility Checker: Baseline Web Feature Support
Search CSS, JavaScript, and DOM APIs with Baseline status and Chrome, Firefox, and Safari minimum versions — offline, in your browser.
Testing Responsive Layouts Across Device Widths
How CSS viewport works vs. device pixels, which breakpoints to test, and why some sites block their own embedding in iframes.
References & standards
Related tools
Aspect Ratio Calculator
Calculate dimensions and ratios for images and videos.
Border Radius Generator
Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
Dummy Avatar Generator
Generate unique SVG avatars for mockups and placeholders using various illustration styles