Flex Container Properties

display: flex;

align-items:
y-axis (cross-axis)

flex-start

flex-end

center

justify-content:
x-axis (main-axis)

flex-start

flex-end

center

space-evenly

space-around

space-between

flex-direction:

row

row-reverse

column

column-reverse

1

2

3

1

2

3

1

2

3

1

2

3

Flex Item Properties

display: flex; (for container)

for items ⬇

flex-grow:

0

5

1

1

3

10

align-self:

flex-start

flex-end

center

order:

A

B

C

flex-shrink:

1 (default)

0

for item ➡ flex-shrink:0; for container ➡ flex-wrap: wrap;

🐶