CSS Flex Tool
Change child count
1
2
3
4
5
6
7
8
flex-direction
row (default)
row-reverse
column
column-reverse
flex-wrap
whether items wrap to the next
row
column
(only applies if combined
width
height
of items is greater than container's)
nowrap (default)
wrap
wrap-reverse
justify-content
alignment along the
x
y
axis
flex-start (default)
flex-end
center
space-around
space-between
align-items
alignment along the
y
x
axis
stretch (default)
baseline
center
flex-start
flex-end
align-content
only applies if there is more than one
row
column
of items
stretch (default)
center
flex-start
flex-end
space-around
space-between
CSS OUTPUT