Flex Cheatsheet

flex-direction

1
2
3
1.container {
2  display: flex;
3  flex-direction: row;
4}
5
6
7
8

justify-content

1
2
3
1.container {
2  display: flex;
3  justify-content: flex-start;
4}
5
6
7
8

align-items

1
2
3
1.container {
2  display: flex;
3  align-items: stretch;
4}
5
6
7
8

align-content

1
2
3
4
5
6
7
8
1.container {
2  display: flex;
3  flex-wrap: wrap;
4  align-content: stretch;
5}
6
7.item {
8  width: ;
9}
10
11
12
13

flex-wrap

1
2
3
4
5
6
7
8
1.container {
2  display: flex;
3  flex-wrap: nowrap;
4}
5
6
7
8

flex-basis

AA
BBB
CCCCCCCCCCC
1.container {
2  display: flex;
3}
4
5.item {
6  flex-shrink: ;
7  flex-basis: ;
8}
9
10
11
12

flex-grow

1
2
3
1.container {
2  display: flex;
3}
4
5
6
7

flex-shrink

1
2
3
1.container {
2  display: flex;
3}
4
5.item {
6  flex-basis: ;
7  flex-shrink: ;
8}
9
10.item3 {
11  flex-shrink: ;
12}
13
14
15
16

align-self

auto
stretch
flex-start
flex-end
center
baseline
1.container {
2  display: flex;
3  flex-direction: row;
4}
5
6.item1 {
7  align-self: auto;
8}
9
10.item2 {
11  align-self: stretch;
12}
13
14.item3 {
15  align-self: flex-start;
16}
17
18.item4 {
19  align-self: flex-end;
20}
21
22.item5 {
23  align-self: center;
24}
25
26.item6 {
27  align-self: baseline;
28}
29
30
31
32

order

1
2
3
1.container {
2  display: flex;
3}
4
5
6
7