CSS Flex Cheat Sheet

justify-content: center

1
2
3

justify-content: end

1
2
3

justify-content: space-between

1
2
3

justify-content: space-around

1
2
3

align-items: start

1
2
3

align-items: center

1
2
3

align-items: end

1
2
3

align-items: stretch

1
2
3

align-items: baseline

1
2
3

flex-wrap: nowrap

1
2
3
1
2
3
1
2
3

flex-wrap: wrap

1
2
3
1
2
3
1
2
3

flex-wrap: wrap-reverse

1
2
3
1
2
3
1
2
3

flex-direction: row

1
2
3

flex-direction: row-reverse

1
2
3

flex-direction: column

1
2
3

flex-direction: column-reverse

1
2
3

flex-grow

0

1

2

flex-shrink

0

1

2

align-self

stretch
start
center
end
baseline
baseline
baseline