CSS Flex
Interactive flexbox playground. Adjust properties, see layout live.
Default
Centered
Nav Bar
Sidebar
Grid-like
Footer
Container
direction
row
row-reverse
column
column-reverse
justify
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
align-content
stretch
flex-start
flex-end
center
space-between
space-around
gap
px
Items (
3
)
+ Add
- Remove
Selected Item:
1
flex-grow
flex-shrink
flex-basis
auto
0
50px
100px
150px
200px
25%
33%
50%
align-self
auto
flex-start
flex-end
center
stretch
baseline
order
width
px
height
px
Preview
Click to copy CSS