CSS Layout Tool
CSS Flexbox Playground
Visually experiment with every Flexbox property. Adjust container and item settings, see live results, and copy production-ready CSS and HTML.
Presets
Container Properties
flex-direction
flex-wrap
justify-content
align-items
align-content
gap: 10px
Items (4)
3 - 12 items
Click an item in the preview to select it for individual settings.
Item 1 Properties
order
flex-grow
flex-shrink
flex-basis
align-self