English 中文 العربية 日本語 Português

CSS: Contêiner Flexbox CSS

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

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

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

3. 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:

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

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

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

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

📝 Exercícios

Básico

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

Intermediário

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

Desafio

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

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.

100%