Flexbox Playground
Interactive CSS Flexbox builder — set container properties, add items, and see live preview
Container Properties
flex-direction
flex-wrap
justify-content
align-items
align-content
gap
px
Flex Items (3)
Item 10 1 auto
Item 20 1 auto
Item 30 1 auto
Live Preview
Item 1
Item 2
Item 3
CSS Output
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
}
/* Item 1 */
.item-1 {
flex: 0 1 auto;
}
/* Item 2 */
.item-2 {
flex: 0 1 auto;
}
/* Item 3 */
.item-3 {
flex: 0 1 auto;
}