Css FlexBox Aprenda agora e Gratuito

Link da lista completa no Youtube, aprenda de uma vez por todas Css FlexBox totalmente gratuito. Aprenda fazer layouts com essa ferramenta css totalmente do zero!

Deixei bem organizada as aulas, além dos vídeos tem o repo no Github com todos os códigos bem detalhado.

O Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do flexbox, as quais exploraremos com mais detalhes no restante deste guia.

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com o layout em uma dimensão de cada vez – seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de CSS – Layout de Grade, que permite o controle simultâneo das colunas e linhas.

Veja todas as aulas clicando aqui

 

Flex Direction

Define a direção dos itens. O padrão é row (linha), por isso quando o display: flex; é adicionado, os elementos ficam em linha, um do lado do outro.

A mudança de row para column geralmente acontece quando estamos definindo os estilos em media queries para o mobile. Assim você garante que o conteúdo seja apresentado em coluna única.

 

Flex Wrap

 

Justify Content

 

Align Items

 

Align Content

 

Flex Grow

 

Flex Shrink

Esta propriedade define a proporção com que um item deve encolher caso seja necessário. Por padrão seu valor é 0, o que indica que o item não deve encolher, e são aceitos apenas valores numéricos positivos.

 

Order

É hora de ver as coisas de uma maneira um pouco diferente.

A propriedade order altera a ordem padrão dos flex items que definimos com flex-direction e flex-flow. Ele afeta apenas a renderização visual dos itens, portanto, não afeta a maneira como os leitores de tela e outros agentes de usuário não CSS leem o código-fonte.

Pode receber qualquer valor inteiro e seu valor padrão é 0.

 

Flex Basis

Uma forma independente do eixo de fornecer o tamanho padrão de um item ao longo do eixo principal. Definir a base flexível de um filho é semelhante a definir a largura desse filho se seu pai for um contêiner com direção flexível. A base flexível de um item é o tamanho padrão desse item, o tamanho do item antes de qualquer cálculo de aumento e redução de flexão ser executado.

 

Flex

 

 

Criando Menu com Css Flexbox

A melhor forma de aprender é codando, então te desafio a ver e fazer as tarefas deste vídeo. E claro se você chegou aqui já deixa aquele like maroto no youtube e faça parte dele!

 

🚀 Curso

– FullStack: https://vidafullstack.com.br/curso-fullstack-javascript

📚 Livros – Html, Css e Js
– HTML 5 – Embarque Imediato – https://amzn.to/2mwank6
– Use a cabeça! Programação em HTML 5 – https://amzn.to/2mvnrGw
– CSS3 – https://amzn.to/2mvptXa
– Use a cabeça! Programação JavaScript – https://amzn.to/2kYH8pL
– Princípios de Orientação a Objetos em JavaScript – https://amzn.to/2lxDsvn

✅ KINDLE QUE EU TENHO – https://amzn.to/2kYJvsF