Skip to content
Tools/Flexbox Playground

Flexbox Playground

Experiment with all flexbox container and item properties. See changes live and copy the CSS.

Presets

Container

flex-direction
flex-wrap
justify-content
align-items
align-contentmulti-line only
Gap
gap8
Container Height180
.container
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
  gap: 8px;
}

Live Preview

3 items
1
2
3
Full CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
  gap: 8px;
}

.item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}

.item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}

.item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}

Items

Click item in preview to select

Quick Reference

flex-grow — how much item expands (0 = no grow)
flex-shrink — how much item shrinks (0 = no shrink)
flex-basis — initial size before grow/shrink
align-self — override container align-items
order — visual order (default 0, lower = earlier)

Related Tools

CSS Gradient GeneratorCSS Box Shadow GeneratorCSS Animation GeneratorCSS Filter GeneratorCSS Minifier / FormatterCSS Grid Generator

🔍 Automate Your Frontend Development and Design System with AI

Flexbox mastery is just one skill. In 20 minutes I'll audit your frontend workflow and show you where AI can automate layout generation, responsive design testing, and component library maintenance at scale.

Get Your Free AI Scan →