Flexbox
Playground
zurapi.com
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
flex-start
flex-end
center
baseline
stretch
align-content
normal
flex-start
flex-end
center
space-between
space-around
stretch
gap
0
4px
8px
12px
16px
24px
+ Add Item
- Remove
Reset
Item Properties
flex-grow
flex-shrink
flex-basis
auto
0
50px
100px
150px
200px
25%
33.33%
50%
align-self
auto
flex-start
flex-end
center
baseline
stretch
order
Preview
Generated CSS
Copy