Flex Components
Flex Direction
Row (default)
1
2
3
Row Reverse
1
2
3
Column
1
2
3
Column Reverse
1
2
3
Alignment
Justify Content - Center
1
2
3
Justify Content - Between
1
2
3
Align Items - Center
1
2
3
Align Items - Stretch
1
2
3
Wrapping & Spacing
Flex Wrap
1
2
3
4
5
6
Large Gap (gap=6)
1
2
3
Gap X & Y Different
1
2
3
4
Complex: Center + Padding
A
B
C
Custom Component (as prop)
Flex as Section
Header
Content
Footer