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;

🐶