Interactive CSS Flexbox Playground
Parent
Children
Container Setup
display
flex
inline-flex
flex-direction
row
row-reverse
column
column-reverse
flex-wrap
nowrap
wrap
wrap-reverse
Alignment
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
Spacing
gap (px)
Click on any item to select it and modify its properties
Selected Item:
None
flex-grow
flex-shrink
flex-basis
align-self
auto
flex-start
flex-end
center
baseline
stretch
order
Apply float: left (to see it's ignored)
Apply to All Items
Reset All Items
+ Add Item
- Remove Item
1
2
3