Contêiner Flexbox CSS

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

Propriedades do Contêiner Flex

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

flex-direction

Controla a direção do eixo principal:

Exemplo

HTML

<style>
.container {
  display: flex;
  flex-direction: row; /* Padrão: horizontal */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

▶ Experimente

justify-content

Alinha itens ao longo do eixo principal:

Exemplo

HTML

<style>
.container {
  display: flex;
  justify-content: space-between;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">Início</div>
  <div class="item">Meio</div>
  <div class="item">Fim</div>
</div>

▶ 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

align-items

Alinha itens ao longo do eixo cruzado:

Exemplo

HTML

<style>
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #2ecc71;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">Curto</div>
  <div class="item">Item alto com mais conteúdo</div>
  <div class="item">Médio</div>
</div>

▶ Experimente

flex-wrap

Controla se itens envolvem para novas linhas:

Exemplo

HTML

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
  width: 300px;
}
.item {
  background: #9b59b6;
  color: white;
  padding: 10px;
  width: 120px;
}
</style>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

▶ Experimente

gap

Define espaçamento entre itens flex:

Exemplo

HTML

<style>
.container {
  display: flex;
  gap: 20px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #f39c12;
  color: white;
  padding: 10px;
  flex: 1;
}
</style>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

▶ Experimente

❓ Perguntas Frequentes

Q 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.

Q 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.

Q 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.