Logo do curso
Curso

Flexbox:

posicione elementos na tela

Quero estudar na alura

9h

Para conclusão

1242

Pessoas nesse curso

9.6

Avaliação média

Certificado

De participação

Introdução_

O que você aprenderá_

  • 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

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.

Yuri Padilha

Yuri Padilha

linkedin

Yuri é desenvolvedor full-stack, formado em Tecnologia de Informação pela USP. Como instrutor de cursos presenciais (Front-end, Java e PHP, Spring e MySQL) sumarizou mais de 1 000 horas de aulas ministradas.

Curso atualizado em 07/01/2026

Ementa

  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

Descubra se esse curso é pra você! Leia as primeiras aulas

Comece essa formação agora mesmo e capacite-se para seu próximo projeto!

Conheça os planos
Escola

Front-end

Desenvolva experiências web incríveis com HTML, CSS e JavaScript, além de se aprofundar nos principais frameworks do mercado, como React, Angular e Vue.JS. Domine JavaScript a fundo, para não depender de copiar e colar.

Conheça a escola

Faça parte da nossa comunidade no discord!

Troque conhecimentos com a comunidade da Alura

Aprenda HTML e CSS com esse e outros cursos, comece agora!

Conheça os Planos para Empresas