-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathResumo modulo 5.txt
102 lines (58 loc) · 4.32 KB
/
Resumo modulo 5.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
Flexbox cria um layout flexivel para adaptar o conteudo
Apenas o conteiner (flex-container) vai receber a configuracao flexbox, os filhos (flex-items) serao configurados como itens
flex-direction: row -------->
flex-direction: row-reverse <--------
flex-direction: column (coluna, usado para celulares, de cima para baixo)
flex-direction: column-reverse (sentido de baixo para cima)
flex-direction: row = gera o eixo main-axis (eixo principal), com dois pontos (main-start e main-end), da esquerda para a direita, e gera o eixo main-axis (eixo vertical), com dois pontos (cross-start e cross-end), de cima para baixo
flex-direction: row-reverse = o eixo main-axis fica da direita para a esquerda, mas o cross-axis continua de cima para baixo
flex-direction: column = o main-axis vai de cima para baixo e o cross-axis da esquerda para a direita
flex-direction: column-reverse = o eixo main-axis fica de baixo para cima e o cross-axis da esquerda para a direita
flex-wrap: configura o comportamento do container
por padrao, flex-wrap: nowrap
O encolhimento dos itens dentro do flexbox dependem do conteudo (exemplo: se for um texto, vai ficar com o tamanho da palavra mais longa)
flex-wrap: wrap (quebra no sentido do eixo transverdal/cross-axis qd diminui o container)
flex-wrap: wrap-reverse (quebra no sentido contrario ao eixo transversal/cross-axis qd diminui o container)
flex-flow = (flex-direction + flex-wrap)
JUstify-content: alinhamento em relacao ao main-axis (eixo principal)
JUstify-content: flex-start (o primeiro item vai ficar grudado no main-start e o expaco branco vai ficar main-end
JUstify-content: flex-end (o ultimo item vai ficar grudado no main-end e o espaco em branco vai ficar no main-start)
JUstify-content: center
JUstify-content: space-between (primeiro item no main-start e o ultimo elemento no main-end, os outros vao ficar distribuidos no centro por igual)
JUstify-content: space-evenly (coloca os itens pelo container de modo que haja um espaco igual entre o main-start e o main-end e os seus respectivos itens)
JUstify-content: space-around (divide o espaco do container em tres espacos e os itens ficam centralizados nesses espacos)
align-items = alinhamento em relacao ao cross-axis (eixo transversal)
align-items: stretch = esticar
align-items: flex-start (itens colados no final do cross-start)
align-items: flex-end (itens colados no final do cross-end)
align-items: center
PARA ALINHAR ITENS PERFEITAMENTE: justify-content e align-items: center
align-content = alinha os elementos no eixo transversal, mas quando eles estao empacotados
align-content: strech (valor padrao) = (pega a area disponivel e dvide pelo numero de linhas/colunas, esticando os itens por lado ou pra baixo)
align-content: flex-start (pega os elementos e gruda no cross-start
align-content: flex-end (pega os elementos e coloca proximo ao cross-end)
align-content: center (espacos em branco no cross-start e cross-end, alinhando ao centro)
align-content: space-between (os primeiros elementos ficam perto do cross-start, os ultimos perto do cross-end e o espaco no meio ficam dividos pelos elementos que venham a existir)
align-content: space-evenly (coloca espaco no cross-start e cross-end, calculando os espacos milimetricamente)
align-content: space-around (divide o eixo trasverssal em espacos iguais, colocando os elementos nas areas demarcadas, centralizando os itens)
Os itens nao sao flex, mas e possivel transformar os itens em elementos flexiveis
Todo elemento dentro do flexbox e por padrao 0
Se forem dados outros valores, o CSS vai ordenar do menor valor para o maior valor
align-self = os itens ficam com alinhamentos diferentes, se aplicando no eixo trasnversal
align-self: auto (herda o alinhamento vertical do pai)
align-self: flex-start (perto do cross-start)
align-self: flex-end (perto do cross-end)
align-self: center
align-self: stretch
flex-basis
flex-basis:auto = a altura do elemento e de acordo com o conteudo
flex-basis: (valor de pixel), nao se adequa ao conteudo e sim ao numero de pixels
por padrao
flex-shrink: 1 (pode encolher qq valor diferente de 0 e positivo)
flex-grow: 0 (nao pode crescer)
1 e 1 = elementos altamente fluidos, que crescem a vontade
O crescimento e proporcional qd os valores sao maiores que 1
propriedade flex = flex-grow + flex-shrink + flex-basis
flex initial = 0 1 auto
flex none = 0 0 auto
flex auto = 1 1 auto