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