← BBobop
Flexbox Playground
Interactive flexbox layout builder. Visual property editor. Zero dependencies.
Container Properties
direction
row
row-reverse
column
column-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
stretch
flex-start
flex-end
center
baseline
flex-wrap
nowrap
wrap
wrap-reverse
gap (px)
align-content
stretch
flex-start
flex-end
center
space-between
space-around
+ Add Item
- Remove Item
Click items to edit individual properties
Preview
Item Properties
order
flex-grow
flex-shrink
flex-basis
auto
0
50px
100px
200px
50%
align-self
auto
flex-start
flex-end
center
stretch
CSS Output
Copy