Layout Generator
HomePage
Contact Me
Flex Layout Generator
Flexbox Container Styles
Display:
flex
inline-flex
Flex Direction:
row
row-reverse
column
column-reverse
Flex Wrap:
nowrap
wrap
wrap-reverse
Justify Content:
flex-start
center
flex-end
space-between
space-around
space-evenly
Align Items:
flex-start
center
flex-end
baseline
stretch
Align Content:
flex-start
center
flex-end
space-between
space-around
stretch
Gap:
Selected Item Properties
Order:
Flex Grow:
Flex Shrink:
Flex Basis:
Align Self:
auto
flex-start
center
flex-end
baseline
stretch
Margin:
Lets Flex!
Live Preview:
Add Item
Remove Item
Cell 1
Copy HTML
Copy CSS
Generated HTML
Generated CSS
