🎯 Principais Conceitos

  • Container (Pai): Elemento que recebe display: flex;. Gerencia o layout dos seus filhos.

  • Item (Filho): Elementos diretamente dentro do container flex. São organizados pelo container.

  • Eixo Principal: Direção padrão dos itens (linha por padrão, mas pode ser coluna). Controlado por flex-direction.

  • Eixo Cruzado: Perpendicular ao eixo principal. Controlado por align-items e align-content.

  • Flexibilidade: Capacidade dos itens de crescerem (flex-grow), encolherem (flex-shrink) ou terem um tamanho base (flex-basis).

📝 Sintaxe Essencial

/* No Container (Pai) */
.flex-container {
  display: flex; /* Define como container flex */

  /* Direção dos itens */
  flex-direction: row; /* padrão: linha (horizontal) */
  /* flex-direction: column; linha vertical */

  /* Quebra de linha */
  flex-wrap: wrap; /* permite quebrar linha */
  /* flex-wrap: nowrap; não quebra (padrão) */

  /* Atalho para flex-direction e flex-wrap */
  flex-flow: row wrap;

  /* Alinhamento no Eixo Principal */
  justify-content: flex-start; /* início (padrão) */
  /* justify-content: flex-end; fim */
  /* justify-content: center; centro */
  /* justify-content: space-between; espaço entre */
  /* justify-content: space-around; espaço ao redor */
  /* justify-content: space-evenly; espaço igualmente */

  /* Alinhamento no Eixo Cruzado (single line) */
  align-items: stretch; /* estica (padrão) */
  /* align-items: flex-start; início */
  /* align-items: flex-end; fim */
  /* align-items: center; centro */
  /* align-items: baseline; alinha pela linha de base */

  /* Alinhamento no Eixo Cruzado (multiple lines) */
  align-content: stretch; /* estica (padrão) */
  /* align-content: flex-start; */
  /* align-content: flex-end; */
  /* align-content: center; */
  /* align-content: space-between; */
  /* align-content: space-around; */
}

/* Nos Itens (Filhos) */
.flex-item {
  /* Crescimento do item (fator) */
  flex-grow: 1; /* ocupa espaço disponível */
  /* flex-grow: 0; não cresce (padrão) */

  /* Encolhimento do item (fator) */
  flex-shrink: 1; /* encolhe se necessário (padrão) */
  /* flex-shrink: 0; não encolhe */

  /* Tamanho base do item antes de crescer/encolher */
  flex-basis: auto; /* largura/altura do conteúdo (padrão) */
  /* flex-basis: 100px; */

  /* Atalho para flex-grow, flex-shrink e flex-basis */
  flex: 0 1 auto; /* não cresce, encolhe, auto-base */
  /* flex: 1; (igual a flex: 1 1 0%) */
  /* flex: auto; (igual a flex: 1 1 auto) */
  /* flex: none; (igual a flex: 0 0 auto) */

  /* Ordem individual dos itens */
  order: 0; /* padrão */
  /* order: 1; */

  /* Alinhamento individual no Eixo Cruzado */
  align-self: auto; /* herda do container (padrão) */
  /* align-self: flex-start; */
  /* align-self: flex-end; */
  /* align-self: center; */
}

⚡ Comandos Rápidos

  • display: flex;: Torna o elemento um container flex.

  • justify-content: center;: Centraliza itens no eixo principal.

  • align-items: center;: Centraliza itens no eixo cruzado (em uma única linha).

  • flex-direction: column;: Muda a direção dos itens para vertical.

  • flex-wrap: wrap;: Permite que os itens quebrem para a próxima linha/coluna.

  • flex: 1;: Item cresce, encolhe e tem base de 0 (ótimo para preencher espaço).

🔧 Casos de Uso

  1. Caso básico: Alinhamento Horizontal e Vertical Simples

    <div class="container">
  <div class="item">Conteúdo</div>
</div>
    .container {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;     /* Centraliza verticalmente */
  height: 100vh; /* Exemplo para ver o efeito */
}

  2. Caso intermediário: Layout de Navegação Responsiva

    <nav class="navbar">
  <a href="#">Home</a>
  <a href="#">Sobre</a>
  <a href="#">Contato</a>
</nav>
    .navbar {
  display: flex;
  justify-content: space-around; /* Distribui links igualmente */
  flex-wrap: wrap; /* Permite quebrar linha em telas menores */
  background-color: #eee;
  padding: 10px;
}
.navbar a {
  padding: 8px 15px;
  text-decoration: none;
  color: #333;
}

  3. Caso avançado: Sistema de Grid Simples (3 colunas, flexíveis)

    <div class="grid-container">
  <div class="col">Coluna 1</div>
  <div class="col">Coluna 2</div>
  <div class="col">Coluna 3</div>
</div>
    .grid-container {
  display: flex;
  flex-wrap: wrap; /* Permite quebrar colunas */
  gap: 20px;       /* Espaço entre as colunas */
}
.col {
  flex: 1 1 calc(33.333% - 20px); /* 3 colunas, encolhem, base de 1/3 menos o gap */
  min-width: 250px; /* Colunas não ficam muito pequenas */
  background-color: lightblue;
  padding: 15px;
  text-align: center;
}
/* Para telas muito pequenas, uma coluna por linha */
@media (max-width: 600px) {
  .col {
    flex: 1 1 100%;
  }
}

🚨 Pegadinhas Comuns

  • display: flex; só funciona no pai direto: Propriedades flexbox aplicadas ao container afetam apenas seus filhos diretos.

  • Altura do flex-container: Para align-items: center; funcionar verticalmente, o container precisa ter uma altura definida (e.g., height: 100vh; ou um valor fixo).

  • margin: auto; em itens flex: Usar margin: auto; em um item flex pode ser poderoso para empurrar outros itens ou centralizar um item específico dentro do eixo principal/cruzado.

  • width e height vs flex-basis: flex-basis geralmente anula width (no eixo principal) e height (no eixo cruzado) em itens flex. Use flex-basis para definir o tamanho inicial preferido.

  • flex-wrap: nowrap; com overflow: Se você não usar flex-wrap: wrap;, os itens tentarão ficar em uma única linha e podem estourar o container.