← Back to tools
CSS Flexbox Playground
Experiment with flexbox properties visually. Click a child to edit its individual properties.
Container
flex-direction
row
row-reverse
column
column-reverse
flex-wrap
nowrap
wrap
wrap-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
flex-start
flex-end
center
stretch
baseline
align-content
normal
flex-start
flex-end
center
space-between
stretch
gap
8px
Children
+ Add Child
Reset
Presets
Centered
Sidebar
Navbar
Grid-like
Holy Grail
3 children
Copy CSS