Como centralizar uma imagem horizontal e verticalmente com CSS Flexbox?

No contêiner, use display: flex; justify-content: center; e align-items: center;.

Qual a diferença entre justify-content e align-items no Flexbox?

justify-content alinha no eixo principal, enquanto align-items alinha no eixo transversal.

O que acontece ao usar flex-wrap: wrap em um contêiner flex?

Os itens que não couberem na linha são movidos para a linha seguinte.

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

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

Name: CSS Flexbox do básico ao avançado
Availability: InStock

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

Sobre o curso online gratuito

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?

Aprenda sobreCSS

Aprenda CSS com cursos online gratuitos e com certificado, ideais para iniciantes e profissionais que desejam criar sites modernos, responsivos e atraentes. Explore conteúdos sobre seletores, cores, layouts, Flexbox, Grid, animações e boas práticas de desenvolvimento web. Escolha seu curso grátis de CSS, estude no seu ritmo e fortaleça seu currículo.

Cursos online Gratuitos sobre CSS Flexbox

Aprenda sobreCSS Flexbox

Encontre os melhores cursos online gratuitos de CSS Flexbox com certificado e aprenda a criar layouts modernos, responsivos e flexíveis. Estude alinhamento, distribuição de elementos, eixos, propriedades do container e dos itens, além de técnicas práticas para desenvolver páginas profissionais. Comece agora e destaque-se no desenvolvimento web!