Please enable JavaScript.
Coggle requires JavaScript to display documents.
FLEXBOX Recurso do css que facilina na organizacão dos elementos na…
FLEXBOX
Recurso do css que facilina na organizacão
dos elementos na pagina.
Responsivo
flex-wrap
nowrap
não deixa o elemento quebrar a linha mesmo estourando o tamanho do pai
wrap
permite a quebra de linha
wrap-reverse
quebra de linha reversa
flex-flow
junta os comandos flex-direction e flex-wrap
row wrap
itens orientados horizontalmente permitindo quebra de linha
Padrão
itens alinhados na horizontal
flex-direction: row;
itens começando na esquerda
justify-content: flex-start:
obedecendo o direcionamento (column e row) elemento com tamanho do pai "esticando" column: vertical row: horizontal
aligin-itens
: stretch -> estica o ate o tamanho do pai
flex-wrap
: nowrap -> nao permite a quebra de linha
Alinhamento
justifly-content
flex-start / center / flex-end
varia de acordo com a orientação x ou y
flex-direction
:
column
: orientação do alinhamento dos itens na vertical
justify-content: padrão se incia em cima
row-reverse
: espelha dos itens
row
: orientação do alinhamento dos itens na horizontal
justify-content: padrão se incia na direita
Aligin-itens
Alinha orientado no eixo transversal
flex-start, flex-end, center
baseline
alinha os itens na base das fontes
Aligin-content
controla os espaços entre as linhas no eixo transvesal
Aligin-self
alinha o propio elemento
Espaçamentos
justify-content
Space-between
: distribuião uniforme
colando os itens na esquerda e direita
(espaçamentos não são somados)
Space-evenly
: Distribuição uniforme, espaço
dividido de maneira uniforme com margin direita e esquerda
(espaçamentos não são somados)
Space-around
: Distribuição uniforme dividindo o
espaço na direita e esquerda do item
(margin no inicio e fim / espaçamentos são somadas)
GAP
Espaçamanto somente os objetos respeitando o eixo
flex- grow
0 - mantem os itens no tamanho original
1 - pega o espaço sobrando e distribui entre os itens igualmente
e possivel usar o flex-grow em mais itens em um mesmo container em que quanto maior o valor (1, 2, 3, ....20)mais partes ele recebera proporcionalmente aos demais
flex-shrink
possibilita a diminuição de um item em relação ao container
basicamente seque as mesmas regas do flex-grow so que encolhendo
flex
possibilita utilizar grow, shrink e basis respectivamente
ex:
flex: 0 1 100%
----------------------------
obs: flex: 1;
--------------------
(muito respomsivel flexivel "use com sabedoria")
flex-basis
possibilita diterminar um tamanho inicial ao item