🕷️
Flexbox Playground
Visualize and learn CSS Flexbox
Home
All Tools
Flexbox Cheatsheet
CSS Grid
Flex Container
+ Add Item
− Remove Item
1
2
3
Container Properties
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
10px
Item Properties (All Items)
flex-grow
0
flex-shrink
1
flex-basis
auto
0
50px
100px
150px
25%
50%
CSS Code
Copy
← Home
All Tools
Flexbox Cheatsheet
CSS Grid