Flexbox Playground
Learn and generate flexbox CSS
100% private — everything stays in your browser
Item 1
Item 2
Item 3
Item 4
Item 5
1
2
3
4
5
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
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; }
.item-4 { flex-grow: 0; flex-shrink: 1; flex-basis: auto; }
.item-5 { flex-grow: 0; flex-shrink: 1; flex-basis: auto; }How to use Flexbox Playground
- 1 Provide your input — Enter your data or adjust the settings in the Flexbox Playground tool above.
- 2 Get your result — Results appear instantly — all processing happens in your browser.
- 3 Copy or download — Copy or download your result. Everything was processed locally on your device.