Zpro-
Tools
!
Flexbox Generator
Visualize and generate Flexbox layouts with interactive controls
Container Properties
Flex Direction
row
row-reverse
column
column-reverse
Justify Content
flex-start
flex-end
center
space-between
space-around
space-evenly
Align Items
flex-start
flex-end
center
stretch
baseline
Flex Wrap
nowrap
wrap
wrap-reverse
Align Content
flex-start
flex-end
center
space-between
space-around
stretch
Gap: 16px
Container Height
Item Properties
Number of Items: 4
Item Width
Item Height
Reset to Default
Preview
Item 1
Item 2
Item 3
Item 4
CSS
HTML
Copy