CSS Grid & Flexbox Visual Builder
🌙
Flex Direction
row (Horizontal)
row-reverse
column (Vertical)
column-reverse
Flex Wrap
nowrap (Single Line)
wrap (Multi-Line)
Justify Content (Main Axis)
flex-start (Default)
center
flex-end
space-between
space-around
space-evenly
Align Items (Cross Axis)
stretch (Fill Space)
flex-start (Align Top)
center (Vertical Center)
flex-end (Align Bottom)
Item Gap (px)
Interactive Playground
1
2
3
Generated Flex CSS Rules
☕ Buy me a coffee