Front-end

Flexbox: Posicione elementos na tela

Curso online de Flexbox: Posicione elementos na tela

1682 9.3

9,3

é a nota desse curso

4.749

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

Este curso faz parte da Formação

Veja o primeiro vídeo

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

Experiências de quem já estudou com a gente

Foto do aluno

Hallessandro Dvilla

em 21/04/2018

Excelente curso! Não conhecia Flexbox e essa ferramenta me ajudou bastante a resolver problemas que tinha com layouts no trabalho.

Flexbox: Posicione elementos na tela

Foto do aluno

Patrick Aparecido Francisco da Silva

em 10/10/2018

Conceitos passados de forma simples e muito bem explicado. Muitos exercícios e exemplos. O curso é ótimo, para todos os níveis.

Flexbox: Posicione elementos na tela

Foto do aluno

Bruno Torres

em 01/08/2018

Ótimo curso! Já utilizava o Flexbox em projetos, mas não sabia muito bem toda a teoria por trás das propriedades. Massifiquei todo o conteúdo com a excelente didática do professor. Parabéns!

Flexbox: Posicione elementos na tela

Escolha o seu plano e vamos começar

  • 691 cursos

    Cursos de programação, design, UX, agilidade, transformação digital, mobile, front-end, infraestrutura e mais.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • Todas as formações

    Guias de estudo completo para você iniciar em uma nova área de tecnologia

  • Projeto avaliado pelos instrutores

    Projeto de conclusão das Formações com avaliação dos professores da Alura e certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Curso online de inglês técnico para aprimorar seu conhecimento

Premium

  • 691 cursos

    Cursos de programação, design, UX, agilidade, transformação digital, mobile, front-end, infraestrutura e mais.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • Todas as formações

    Guias de estudo completo para você iniciar em uma nova área de tecnologia

  • Projeto avaliado pelos instrutores

    Projeto de conclusão das Formações com avaliação dos professores da Alura e certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Curso online de inglês técnico para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 691 cursos

    Cursos de programação, design, UX, agilidade, transformação digital, mobile, front-end, infraestrutura e mais.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • Todas as formações

    Guias de estudo completo para você iniciar em uma nova área de tecnologia

  • Projeto avaliado pelos instrutores

    Projeto de conclusão das Formações com avaliação dos professores da Alura e certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Curso online de inglês técnico para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 691 cursos

    Cursos de programação, design, UX, agilidade, transformação digital, mobile, front-end, infraestrutura e mais.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • Todas as formações

    Guias de estudo completo para você iniciar em uma nova área de tecnologia

  • Projeto avaliado pelos instrutores

    Projeto de conclusão das Formações com avaliação dos professores da Alura e certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Curso online de inglês técnico para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana