Front-end

Flexbox: Posicione elementos na tela

Curso online de Flexbox: Posicione elementos na tela

663 9.5

9,5

é a nota desse curso

2.184

alunos neste curso

Faça esse curso 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
  • 9h para conclusão
  • 37 atividades
  • 130 minutos de videos

Curso Flexbox: Posicione elementos na tela

12x R$25

(à vista R$300)

Matricule-se
  • 1
    Curso
  • 37
    Atividades
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra
  • Acesso à Alura Start

Premium

12x R$75

(à vista R$900)

Matricule-se
  • 422
    Cursos
  • 24.541
    Atividades
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra
  • Acesso à Alura Start

Premium Plus

12x R$100

(à vista R$1.200)

Matricule-se
  • 422
    Cursos
  • 24.541
    Atividades
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra
  • Acesso à Alura Start
Acesso por 1 ano
Certificado digital de conclusão
Estude 24h/dia onde e quando quiser
Novos cursos toda semana

Veja a 1ª aula

Público alvo

Desenvolvedor front-end com experiência em HTML e CSS e que já tenha sofrido com posicionamento de elementos na página

Nível de Dificuldade

Intermediário

Instrutores

  • Yuri Padilha

    Formado em Sistemas de Informação pela USP, atualmente trabalha como desenvolvedor Full Stack e instrutor na Caelum e Alura. Seu emoji preferido é a Pusheen (gato gordo do amor).

Já é aluno?

Começar o Curso

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

Curso Flexbox: Posicione elementos na tela

12x R$25

(à vista R$300)

Matricule-se
  • 1
    Curso
  • 37
    Atividades
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra
  • Acesso à Alura Start

Premium

12x R$75

(à vista R$900)

Matricule-se
  • 422
    Cursos
  • 24.541
    Atividades
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra
  • Acesso à Alura Start

Premium Plus

12x R$100

(à vista R$1.200)

Matricule-se
  • 422
    Cursos
  • 24.541
    Atividades
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra
  • Acesso à Alura Start
Acesso por 1 ano
Certificado digital de conclusão
Estude 24h/dia onde e quando quiser
Novos cursos toda semana