1 - Display - Ativa o flexbox / identifica que aquele elemento será um container flex.
2 - Flex-direction - Define a direção do eixo principal.
Exemplos:
Flex-direction: row
1
2
3
Flex-direction: Column
1
2
3
Flex-direction: Row-Reverse
1
2
3
Flex-direction: Column Reverse
1
2
3
3: Justify-Content
Alinhar os objetos ou elementos no eixo principal.
Exemplos:
Justify-Content: Center
1
2
3
Justify-Content: Flex Start
1
2
3
Justify-Content: Flex-end
1
2
3
Justify-Content: Flex-between
1
2
3
Justify-Content: Space-Around
1
2
3
Justify-Content: Space-Evenly
1
2
3
4: Align-Itens:
Alinha os objetos nos eixos perpendiculares ou secundários.
Exemplos:
Flexbox: Align-Itens: Center;
1
2
3
Flexbox: Align-Itens: Flex-Start;
1
2
3
Flexbox: Align-Itens: Flex-end;
1
2
3
Flexbox: Align-Itens: Stretch
1
2
3
Flexbox: Align-Itens: Baseline
1
2
3
5: Flex-wrap:
Serve para decidir se os elemnetos irão para a linha de baixo, quando chegar no final ou se eles ficarão
espremidos - Quebra de linhas.
Exemplos:
flex wrap: Nowrap Espreme a linha para caber tudo na mesma linha
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
flex wrap: wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
flex wrap: wrap reverse
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
6: FLEX FLOW - Propriedade ShorHand (Atalho que combina as propriedade flex direction e flex wrap): Ela é um atalho para uma ou mais Propriedade ou valores. Exemplos:
Flex Flow: row nowrap - (Não quebra a linha)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
7: Align-Content - Só Funciona junto com wrap (Quebra de linha), não funciona com nowrap. Para quando existir o flex wrap ou seja quebra de linha e nos queremos alinhar os objetos no eixo perpendicular e secundario. Exemplos:
Align-Content: center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Align-Content: flex-start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Align-Content: flex-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Align-Content: space-between
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Align-Content: space-around
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Align-Content: Space-Evenly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Align-Content: Inherit (Herdado do Pai)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18