CSS Flexbox Playground

Configure container and item flex properties visually. Click items to select and edit their individual properties.

Container Properties
flex-direction
justify-content
align-items
flex-wrap
align-content
gap
Item Properties
flex-grow
flex-shrink
flex-basis
align-self
order
Live Preview — click an item to select it
1
2
3
4
5
Generated CSS
Need uptime monitoring? AlertsDock monitors your APIs and cron jobs — starting at $12/mo.