← All Tools
CSS Flexbox Playground
Experiment with flexbox properties and see the result instantly
📦 Container Properties
display
flex
inline-flex
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
stretch
flex-start
flex-end
center
baseline
align-content
stretch
flex-start
flex-end
center
space-between
space-around
gap (px)
+ Add Item
− Remove Item
↺ Reset
👁️ Preview
🎯 Item
Properties
order
flex-grow
flex-shrink
flex-basis (px or auto)
align-self
auto
flex-start
flex-end
center
stretch
baseline
width (px)
height (px)
💻 Generated CSS
📋 Copy CSS
Copied!