CSS: Contêiner Flexbox CSS

Última atualização: 2026-10-13

Flexbox é um poderoso método de layout unidimensional que facilita alinhar, distribuir e ordenar elementos dentro de um contêiner.

Propriedades nesta seção: flex-direction flex-wrap justify-content align-items align-content gap margin

1. Propriedades do Contêiner Flex

(1) Referência Rápida

Propriedade	Valores	Finalidade
`display: flex`	—	Cria contêiner flex
`flex-direction`	`row`, `row-reverse`, `column`, `column-reverse`	Direção do eixo principal
`flex-wrap`	`nowrap`, `wrap`, `wrap-reverse`	Se itens envolvem
`justify-content`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`	Alinhamento do eixo principal
`align-items`	`flex-start`, `flex-end`, `center`, `stretch`, `baseline`	Alinhamento do eixo cruzado
`align-content`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `stretch`	Eixo cruzado multi-linha
`gap`	`10px`, `10px 20px`	Espaço entre itens

2. flex-direction

Controla a direção do eixo principal:

▶ Exemplo

▶ Experimente

3. justify-content

Alinha itens ao longo do eixo principal:

▶ Exemplo

▶ Experimente

Valores comuns:

flex-start: Itens no início (padrão)
flex-end: Itens no fim
center: Itens centralizados
space-between: Espaço igual entre itens
space-around: Espaço igual ao redor dos itens
space-evenly: Espaço igual entre e ao redor

4. align-items

Alinha itens ao longo do eixo cruzado:

▶ Exemplo

▶ Experimente

5. flex-wrap

Controla se itens envolvem para novas linhas:

▶ Exemplo

▶ Experimente

6. gap

Define espaçamento entre itens flex:

▶ Exemplo

▶ Experimente

Propriedades nesta seção: flex-direction flex-wrap justify-content align-items align-content gap margin

❓ Perguntas Frequentes

P justify-content muda de direção quando flex-direction é column?

R Sim. justify-content sempre funciona ao longo do eixo principal. Quando flex-direction: row, o eixo principal é horizontal; quando column, o eixo principal se torna vertical. Lembre-se: justify-content controla o eixo principal, align-items controla o eixo cruzado.

P Quando devo usar flex-wrap?

R Quando itens não cabem em uma linha. O padrão (nowrap) comprime itens; wrap deixa-os fluir para a próxima linha. Essencial para layouts responsivos onde itens devem empilhar em telas menores.

P Qual é a diferença entre align-items e align-content?

R align-items controla alinhamento de itens de linha única (dentro de cada linha). align-content controla distribuição de espaço multi-linha (só funciona com múltiplas linhas). Linha única: align-content é ignorado.

📖 Resumo

Propriedades do contêiner Flexbox controlam comportamento "geral" — como itens arranjam, envolvem e alinham
Lembre-se: justify-content controla eixo principal, align-items controla eixo cruzado
Se flex-direction muda, estes dois trocam suas direções efetivas

📝 Exercícios

Básico

Crie um contêiner flex com 5 itens. Experimente todos os quatro valores de flex-direction para observar mudanças de direção.
Demonstre todos os 6 valores de justify-content com capturas de tela para comparação.

Intermediário

Defina flex-wrap: wrap e observe alinhamento multi-linha com diferentes valores de align-content.
Compare a propriedade gap com margin para espaçamento — aprecie a conveniência do gap.

Desafio

Crie uma barra de navegação responsiva: desktop tem logo à esquerda, menu à direita; mobile tem logo à esquerda, hambúrguer à direita, menu oculto.
Crie uma lista de cards com justify-content: space-between para distribuição uniforme, última linha alinhada à esquerda.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós