02- Flex & Grid

Manages flexible and grid-based layouts.

Flex Basis

01
02
03

Flex Direction

Row

01
02
03

Row Reverse

01
02
03

Column

01
02
03

Column Reverse

01
02
03

Flex Wrap

Don't Wrap

01
02
03

Wrap Normally

01
02
03

Flex Grow

Grow (02)

01
02
03

Don't Grow (02)

01
02
03

Flex Shrink

Shrink (02)

01
02
03

Don't Shrink (02)

01
02

Order

01
02
03

Grid Template Columns

1
2
3
4
5
6
7
8
9
10
11
12

Grid Columns Start / End

Spanning Columns

1
2
3
4
5
6
7

Starting & Ending

1
2
3
4

Grid Template Rows

1
2
3
4
5
6
7
8
9
10
11
12

Grid Rows Start / End

Spanning Rows

1
2
3

Starting & Ending

1
2
3

Gap

1
2
3
4
5
6

Justify Content

Start

1
2
3

Center

1
2
3

End

1
2
3

Space Between

1
2
3

Space Around

1
2
3

Space Evenly

1
2
3

Justify Items

Start

1
2
3
4
5
6

End

1
2
3
4
5
6

Center

1
2
3
4
5
6

Stretch

1
2
3
4
5
6