arrow_back
Back to Tools
Flexbox Generator
Create flexible and responsive layouts with CSS Flexbox
help_outline
How to Use
Container Properties
Flex Direction
Row
Column
Row Reverse
Column Reverse
Justify Content
Flex Start
Flex End
Center
Space Between
Space Around
Space Evenly
Align Items
Stretch
Flex Start
Flex End
Center
Baseline
Flex Wrap
No Wrap
Wrap
Wrap Reverse
Gap
Item Properties
Number of Items
Flex Grow
Flex Shrink
Flex Basis
CSS
HTML
content_copy
Copy Code
How to Use the Flexbox Generator
close
Container Properties
Flex Direction:
Choose how flex items are arranged (row, column, reverse)
Justify Content:
Control alignment along the main axis
Align Items:
Control alignment along the cross axis
Flex Wrap:
Determine if items should wrap to new lines
Gap:
Set spacing between flex items
Item Properties
Number of Items:
Add or remove flex items (1-12)
Flex Grow:
Control how items grow relative to others
Flex Shrink:
Control how items shrink relative to others
Flex Basis:
Set the initial size of items
Preview and Code
The preview section shows a live representation of your flexbox layout
Switch between CSS and HTML tabs to view the generated code
Click the copy button to copy the code to your clipboard
Code copied to clipboard!