Curso de Flexbox: Posicione elementos na tela

Faça esse curso de HTML e CSS e:

• Aprenda a famosa especificação flexible box para posicionar seus elementos na página
• Entenda as diversas propriedades do flexbox e como usá-las
• Entenda como as propriedades do flexbox substituem float, inline e inline-block
• Elabore um site responsivo com flexbox

Conteúdo Detalhado

1. Introdução e Cabeçalho da página

   • Projeto Alurinha
   • O que é flexbox?
   • Nos livrando dos floats, inline e inline-blocks
   • Espaçando os elementos com justify-content
   • Alinhando verticalmente os elementos com align-items

2. Fazendo o rodapé

   • Mais formas de espaçamento com space-around
   • Mudando a direção de renderização do flex
   • Quebrando os elementos para outras linhas

3. Fazendo o grid de cursos

   • Juntando as coisas que vimos até agora
   • Limitações do flex
   • Fazendo um grid com flex

4. Adaptando para mobile

   • Fluxo dos elementos em um contexto mobile
   • Mudando a ordem dos elementos

5. Mais sobre flexbox & desafios

   • Nomenclatura oficial do flexbox
   • Fazendo os flex items crescer com flex-grow
   • Agora fazendo eles diminuírem elegantemente com flex-shrink
   • Definindo largura e altura de flex items com flex-basis
   • Invertendo a ordem de renderização dos elementos