CSS Flexbox Generator
Container Properties
Flex Direction
row
row-reverse
column
column-reverse
Justify Content
flex-start
center
flex-end
space-between
space-around
space-evenly
Align Items
flex-start
stretch
center
flex-end
baseline
Flex Wrap
nowrap
wrap
wrap-reverse
Gap (px)
Padding (px)
Preview
Item 1
Item 2
Item 3
+ Add
– Remove
Edit Item
Reset
HTML Code
CSS Code
Item Properties
×
Order
Flex Grow
Flex Shrink
Flex Basis
Apply
© 2026 | Written with
♥
for beginners | Kabindra