.png)
Fundamentos do Flexbox - Parte 1
Aula 4 - Estrutura básica do display: flex
A estrutura básica do display:flex consiste
em um container que pode ser qualquer tag e
suas tags filhas que são os flex-itens. O
comportamento padrão de elementos filhos em um
container flex é posicionar-se
inline com tamanho de acordo com o conteúdo
dos elementos.
Aula 6 - Estrutura básica do display: flex
O flex-direction por padrão é row.
Podemos alterá-lo para row-reverse,
column ou column-reverse. Essa
propriedade deve ser aplicada na tag
container. Podemos utilizar essas
propriedades em conjunto com a propriedade
float. A maior vantagem desse sistema é
variar o posicionamento de linha e coluna conforme
os breakpoints ou seja quando alteramos as
dimensões da tela.
Aula 8 - Estrutura básica do flex-wrap
Por padrão os itens em display: flex não
quebram linha. Eles tentam se redimensionar até o
mínimo possível para permanecer na mesma linha. Esse
comportamento ocorre por padrão quando o
flex-wrap: no-wrap.
O wrap permite que o item que estoure o container seja reposicionado na linha abaixo. É possível ainda utilizar o wrap-reverse que posiciona o elemento em uma linha acima dos itens do container.
Importante verificar que nesse caso ele pode estourar o container na vertical caso haja mais elementos que a altura definida nele. No exemplo utilizamos um container com um height fixo e definimos o height dos itens em 50%. Dessa forma os filhos tem 50% do tamanho do pai e consquentemente se estouramos a largura para mais de duas linhas ele irá estourar na altura. Caso não tenhamos alturas definidas ele será adaptado de acordo com o espaço disponível.
O wrap permite que o item que estoure o container seja reposicionado na linha abaixo. É possível ainda utilizar o wrap-reverse que posiciona o elemento em uma linha acima dos itens do container.
Importante verificar que nesse caso ele pode estourar o container na vertical caso haja mais elementos que a altura definida nele. No exemplo utilizamos um container com um height fixo e definimos o height dos itens em 50%. Dessa forma os filhos tem 50% do tamanho do pai e consquentemente se estouramos a largura para mais de duas linhas ele irá estourar na altura. Caso não tenhamos alturas definidas ele será adaptado de acordo com o espaço disponível.
Aula 10 - Estrutura básica e prática com flex flow
O flex-flow engloba os dois parametros
analisados anteriormente, porém é pouco utilizado
pois quando a direção é column o
wrap mantém o comportamento padrão
no-wrap
Aula 11 - Estrutura básica do justify content
A propriedade justify-content vai alinhar
os itens dentro do container de acordo com a direção
definida e tratar do espaçamento entre eles. Não se
aplica se os itens estiverem ocupando 100% do
container. As variações do
justify-content podem ser
flex-star, flex-end,
center, space-between e
space-around
Aula 13 - Prática com justify content parte 2
Aqui veremos o efeito do
justify-content com o
flex-direction: column
Aula 14 - Estrutura básica e prática com align
items
O align-items faz o alinhamento dos
flex-itens de acordo com o eixo do container.
Ele é diferente quando os itens estão em colunas ou
linhas. Os alinhamentos possíveis são
center, stretch (padrão),
flex-start, flex-end,
baseline.
O center alinha todos os elementos no eixo em função do maior elemento. O stretch aumenta o box dos elementos de modo que todos fiquem do tamanho do maior. O flex-start e o flex-end posicionam os elementos respectivamente no inicio ou no fim do container. O baseline alinha o item na base da linha do elemento.
Quando combinamos as propriedades justify-content: center e align-items: center temos o elemento centralizado em todos os lados do box container. Para isso precisamos zerar a propriedade flex para que o elemento não cresça para se adaptar ao container.
O center alinha todos os elementos no eixo em função do maior elemento. O stretch aumenta o box dos elementos de modo que todos fiquem do tamanho do maior. O flex-start e o flex-end posicionam os elementos respectivamente no inicio ou no fim do container. O baseline alinha o item na base da linha do elemento.
Quando combinamos as propriedades justify-content: center e align-items: center temos o elemento centralizado em todos os lados do box container. Para isso precisamos zerar a propriedade flex para que o elemento não cresça para se adaptar ao container.
Aula 15 - Estrutura básica e pratica com align
content
O align-content é responsável por tratar o
alinhamento das linhas do container em relação ao
eixo vertical do container. Para isso é necessário
que o container utilize quebra de linhas
(wrap) e que a altura do container seja
maior que a soma da linha dos itens. Os alinhamentos
são center, stretch,
flex-start, flex-end,
space-between e space-around.
A diferença de aplicar o align-content para aplicar o justify-content em colunas é que no primeiro temos a distribuição dos itens primeiramente em linha e aplicamos o align-content nos valores de quebra de linha.
A diferença de aplicar o align-content para aplicar o justify-content em colunas é que no primeiro temos a distribuição dos itens primeiramente em linha e aplicamos o align-content nos valores de quebra de linha.
Fundamentos do Flexbox - Parte 2
Aula 16 - Estrutura básica e prática com flex grow
O flex-grow define a proporcionalidade de
crescimento dos itens, respeitando o tamanho de seus
conteúdos internos.
Não funciona caso o container esteja com
justify-content
O valor do flex-grow será sempre numérico.
Aula 17 - Estrutura básica do flex basis
O flex-basis é a propriedade que estabelece
o tamanhoi inicial do item antes da distribuição de
espaço restante dentro dele, usando como base o
conteudo interno. Seus valores podem ser
auto, Npx, N%, Nem(valores em
unidades pré-definidos), '0' será ddefinido
pelo flex-grow.
Aula 19 - Estrutura básica do flex shrink
O flex-shrink permite estabelecer a
capacidade de redução ou compressão do tamanho de um
item.
Aula 21 - Estrutura básica e prática com flex
A propriedade flex concentra as
propriedades grow, shrink e
basis.
Aula 22 - Estrutura básica e prática com order
A propriedade order define como diz o nome
o ordenamento dos itens no box. O
order aceita valores e ordena de acordo com
o numero definido para cada item. Podemos utilizar
numeros negativos.
Aula 23 - Estrutura básica e prática com align-self
A propriedade align-self estabelece o
alinhamento de modo individual sobre um determinado
item. Os valores podem ser auto,
flex-start, flex-end,
center, stretch e
baseline
Projeto Integrador
Aula 25 - Organizando a interface
Inicio do projeto e diagramação dos elementos.
Inclusão das classes para o flex-container e
flex-itens. O projeto em si tem bastante estilização
e algumas utilizações do display: flex para
criação de itens como linhas de estilo e os
marcadores de listas. Esses elementos são criados
como <div> cegas e formatados com
height e width de modo a criar uma
linha ou um quadrado que é posicionado pelo fluxo do
display.
Foi criado um sistema de responsividade entre telas com media queries.
Foi criado um sistema de responsividade entre telas com media queries.