CSS Flexbox: O guia para quem tem pressa

🎯 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

   HTMLCopiar

   <div class="container">  <div class="item">Conteúdo</div></div>

   CSSCopiar

   .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

   HTMLCopiar

   <nav class="navbar">  <a href="#">Home</a>  <a href="#">Sobre</a>  <a href="#">Contato</a></nav>

   CSSCopiar

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

   HTMLCopiar

   <div class="grid-container">  <div class="col">Coluna 1</div>  <div class="col">Coluna 2</div>  <div class="col">Coluna 3</div></div>

   CSSCopiar

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