๐๏ธ Flexbox Generator
interactive CSS builder
๐ Direction & Flow
flex-direction
row โ
row-reverse โ
column โ
column-reverse โ
flex-wrap
nowrap
wrap
wrap-reverse
โ๏ธ Alignment
justify-content
flex-start
center
flex-end
space-between
space-around
space-evenly
align-items
stretch
flex-start
center
flex-end
baseline
align-content
stretch
flex-start
center
flex-end
space-between
space-around
(when wrap)
๐ Spacing & Sizing
gap (px)
12px
item min-width
80px
โณ Reset all defaults
๐งช Live Flex Container
Item 1
flex
Item 2
flex
Item 3
flex
Item 4
flex
๐จ Generated CSS (container)
๐ Copy CSS
.container { display: flex; /* properties will appear here */ }