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

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)