Imagem do Curso gratuito CSS Flexbox do básico ao avançado

Curso online gratuitoCSS Flexbox do básico ao avançado

Duração do curso online: 3 horas e 24 minutos

Novo

Domine layouts responsivos com CSS Flexbox: alinhe, distribua espaço e crie menus e telas modernas. Curso online gratuito com exercícios e certificado.

Neste curso gratuito, aprenda sobre

  • Aplicar display:flex e entender a mudança de layout para alinhamento em eixos
  • Usar justify-content para distribuir itens no eixo principal, incluindo space-between/around/evenly
  • Centralizar conteúdo com align-items e justify-content (horizontal e vertical) no contêiner
  • Criar menus e barras de navegação responsivas com HTML/CSS usando Flexbox
  • Controlar crescimento proporcional com flex-grow e como o espaço livre é dividido
  • Criar efeitos de interação com flex-grow no :hover (item expandindo e redistribuindo espaço)
  • Alinhar itens no eixo cruzado com align-items e entender stretch/center/etc.
  • Construir layouts reais (tela de login e card/cartão) estruturando componentes com flex
  • Usar flex-direction (row/column) e como mudam eixo principal e eixo cruzado
  • Saber qual propriedade centraliza na horizontal quando flex-direction: column (align-items)
  • Que a direção padrão é row quando flex-direction não é definida
  • Evitar quebra/overflow com flex-wrap: wrap, criando múltiplas linhas/colunas
  • Usar gap para espaçamento entre itens; % do gap é baseada no tamanho do contêiner
  • Combinar direction e wrap com flex-flow e reordenar itens visualmente com order

Descrição do curso

Se você já tentou alinhar elementos no CSS “no braço” com margens, floats ou ajustes intermináveis, o Flexbox muda completamente o jogo. Neste curso online gratuito de CSS Flexbox do básico ao avançado, você aprende a construir layouts mais limpos, previsíveis e responsivos, entendendo de verdade como o navegador distribui espaço entre os itens.

A jornada começa pelo essencial: o que acontece ao aplicar display: flex no contêiner e por que isso transforma a organização dos elementos na tela. A partir daí, você desenvolve domínio sobre alinhamento e distribuição com justify-content e align-items, aprendendo a centralizar conteúdos na horizontal e na vertical, criar espaçamentos consistentes e resolver problemas clássicos de interface de um jeito direto e profissional.

O curso também foca no comportamento dos itens quando há sobra ou falta de espaço. Você entende, na prática, como flex-grow faz os elementos expandirem de forma proporcional, como flex-shrink atua quando o layout precisa encolher, e como flex-direction altera eixos e muda a lógica de centralização. Isso traz autonomia para montar estruturas que se adaptam melhor a diferentes telas e conteúdos variáveis, sem depender de gambiarras.

Para consolidar o aprendizado, você aplica Flexbox em cenários reais do dia a dia do front-end, como a criação de menu, interface de login e um cartão de visita em HTML e CSS. Ao explorar recursos como flex-wrap, gap, flex-flow e order, você ganha repertório para organizar linhas e colunas, controlar quebras, espaçamentos e a ordem visual com mais segurança.

Com vídeos e exercícios ao longo do caminho, este curso de Programação Front-End é ideal para quem quer evoluir em layout e UI, reforçar fundamentos de CSS e montar páginas com padrão profissional — com a vantagem de estudar no seu ritmo e ainda obter certificado ao final.

Conteúdo do curso

  • Aula em vídeo: Aula 01 - Como usar o display: flex de forma rápida e fácil 08m
  • Exercício: Qual é o efeito principal de aplicar display: flex no elemento contêiner (pai)?
  • Aula em vídeo: Aula 02 - como usar o justify-content do flex-box - Tutorial completo 09m
  • Exercício: Em um container com display: flex, qual valor de justify-content distribui os itens com espaçamento igual entre todos os vãos, incluindo as bordas do container?
  • Aula em vídeo: Aula 03 - Criando um menu do zero utilizando HTML e CSS com Flexbox - Tutorial Completo 30m
  • Exercício: Para centralizar uma imagem dentro de uma div usando Flexbox (horizontal e verticalmente), qual combinação de propriedades deve ser aplicada no contêiner?
  • Aula em vídeo: Aula 04 - Como usar CSS Flex-Grow, aprenda em 12 Minutos: Teoria e Prática 11m
  • Exercício: Ao definir flex-grow: 1 para três itens dentro de um container com display: flex, qual será o resultado na distribuição do espaço disponível?
  • Aula em vídeo: Aula 05 - Aplicação real de flex-grow em HTML CSS - flex-grow na prática! 08m
  • Exercício: Ao aplicar flex-grow: 3 no estado :hover de um item flex, qual  o efeito esperado?
  • Aula em vídeo: Aula 06 - Como usar o align-items do flexbox 07m
  • Aula em vídeo: Aula 07 - Como criar uma interface de login com HTML e CSS usando flexbox 20m
  • Aula em vídeo: Aula 08 - Como usar o flex-shrink do flexbox 09m
  • Aula em vídeo: Aula 09 - Como usar o flex-direction do flexbox 10m
  • Exercício: Ao usar Flex Direction: column no container, qual propriedade passa a ser usada para centralizar os itens na horizontal?
  • Aula em vídeo: Aula 10 - Como criar um cartão de visita com HTML e CSS Flexbox - Guia para iniciantes - Parte 1 33m
  • Exercício: Ao mudar um container flex para flex-direction: column, qual propriedade passa a ser a mais adequada para centralizar os itens no eixo horizontal?
  • Aula em vídeo: Aula 11 - Como criar um cartão de visita com HTML e CSS Flexbox - Guia para iniciantes - Parte 2 24m
  • Exercício: Ao aplicar display: flex no elemento pai para colocar ícone e texto lado a lado, qual é a direção padrão do Flexbox quando flex-direction não é definida?
  • Aula em vídeo: Aula 12 - Aprenda como usar o FLEX-WRAP do flexbox de uma vez por todas! Tutorial simples e prático 06m
  • Exercício: Qual é o efeito de usar a propriedade CSS flex-wrap: wrap em um contêiner flex quando os itens não cabem na mesma linha?
  • Aula em vídeo: Aula 13 - Aprenda como usar o GAP do FLEXBOX de uma vez por todas! Tutorial rápido e direto 07m
  • Exercício: Ao usar `gap: calc(20px + 10%)` em um contêiner com `display: flex`, o valor em porcentagem (10%) é calculado com base em quê?
  • Aula em vídeo: Aula 14 - Entendendo de vez como usar a propriedade flex-flow do flexbox! 06m
  • Aula em vídeo: Aula 15 - Guia Completo: Como usar a propriedade Order do Flexbox 10m
  • Exercício: No Flexbox, como a propriedade CSS order define a posição dos itens?

Este curso gratuito inclui:

3 horas e 24 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso