⚡ Curso de CSS • Web-ZoneWare

Flex Items: flex-grow, shrink, basis e order | Web Academy

Lição 29 de 50

Flex Items: flex-grow, shrink, basis e order | Web Academy

Nas lições anteriores, configuramos o elemento pai (o Flex Container) como o maestro do layout. Agora, passamos a batuta para os músicos individuais: os Flex Items. Cada elemento filho direto possui propriedades exclusivas para decidir como reagir quando há espaço de sobra no contêiner, como se defender para não ser esmagado quando a tela diminui, como desobedecer o alinhamento geral do pai com align-self e como alterar sua ordem visual com order.

1. flex-basis — O Ponto de Partida Geométrico

A propriedade flex-basis define o tamanho ideal inicial de um item flexível antes que qualquer crescimento (flex-grow) ou encolhimento (flex-shrink) seja calculado pelo navegador:

CSS3 3 linhas 
.item {
  flex-basis: 260px; /* Base inicial de 260px ao longo do Eixo Principal */
}
  • Se o Eixo Principal for horizontal (flex-direction: row), flex-basis atua como uma largura inicial (width).
  • Se o Eixo Principal for vertical (flex-direction: column), flex-basis atua como uma altura inicial (height).
  • flex-basis: auto (Padrão): O navegador consulta a largura/altura declarada do item. Se nenhuma dimensão for definida, ele assume o tamanho exato do conteúdo interno (content-size).

2. flex-grow — A Conquista do Espaço Sobressalente

Quando todos os itens são posicionados e ainda sobra espaço vazio no Eixo Principal, a propriedade flex-grow define a capacidade de um item se expandir para absorver essa fatia restante:

CSS3 3 linhas 
.item-expandir {
  flex-grow: 1; /* Valor numérico sem unidade (fator de proporção) */
}

A Matemática do flex-grow: O valor padrão é 0 (o item não cresce, mantendo sua base). Se você tem três itens e todos recebem flex-grow: 1, o espaço livre restante é dividido em 3 partes iguais. Se o Item A receber flex-grow: 2 e os Itens B e C receberem flex-grow: 1, o espaço livre é fatiado em 4 cotas (2 + 1 + 1): o Item A abocanha 50% de todo o espaço vago, e B e C recebem 25% cada!

3. flex-shrink — A Defesa Contra o Esmagamento

O inverso do crescimento é o encolhimento. Se o contêiner encolher e o espaço total for insuficiente para abrigar a soma dos flex-basis dos itens, a propriedade flex-shrink define como eles devem ceder espaço para evitar transbordamento (overflow):

CSS3 4 linhas 
.avatar,
.icone-menu {
  flex-shrink: 0; /* IMUNIDADE: Nunca encolhe nem se deforma! */
}
  • O Padrão é 1: Por padrão, todos os itens flexíveis aceitam ser espremidos proporcionalmente.
  • O Poder de flex-shrink: 0: Um dos truques mais cruciais da web moderna! Ao colocar flex-shrink: 0 em fotos de perfil, logotipos, badges e botões laterais, você impede que o texto vizinho esmague a imagem em telas de smartphone estreitas.

4. O Atalho Consagrado: flex

Na prática profissional, raramente escrevemos as três propriedades separadas. A própria especificação da W3C recomenda enfaticamente o uso do atalho unificado flex:

CSS3 4 linhas 
/* Sintaxe: flex: [flex-grow] [flex-shrink] [flex-basis]; */
.card {
  flex: 1 1 280px;
}

Os 4 Presets Mais Famosos do Mundo Real

Declaração Abreviação Equivalente Longo Comportamento no Layout
flex: initial; flex: 0 1 auto; Padrão do navegador. Não cresce, encolhe se faltar espaço, tamanho baseado no conteúdo.
flex: auto; flex: 1 1 auto; Totalmente elástico. Cresce e encolhe respeitando o tamanho original do conteúdo.
flex: none; flex: 0 0 auto; Totalmente rígido. Não cresce nem encolhe sob nenhuma hipótese (ideal para barras fixas).
flex: 1; flex: 1 1 0%; A Fórmula Mágica de Colunas Iguais: Zera a base de conteúdo e divide o contêiner em fatias matematicamente idênticas!

5. align-self — A Rebeldia Individual na Transversal

Se o contêiner pai declarou align-items: center, todos os filhos ficarão centralizados verticalmente. Mas e se um único botão precisar ficar colado no topo ou esticado na base? Para isso usamos align-self no elemento filho:

CSS3 3 linhas 
.botao-fechar {
  align-self: flex-start; /* Ignora o alinhamento do pai e sobe para o topo! */
}

Valores aceitos: auto (herda o valor de align-items do pai), flex-start, flex-end, center, baseline e stretch.

6. order e o Perigo de Acessibilidade (WCAG)

Por padrão, os itens flexíveis são renderizados na exata ordem em que aparecem no código HTML (order: 0). A propriedade order permite reorganizar visualmente essa sequência sem alterar o HTML:

CSS3 7 linhas 
.destaque-vip {
  order: -1; /* Pula para o início de toda a fila visual */
}
 
.item-secundario {
  order: 10; /* Vai para o fim da fila */
}

Aviso Crítico de Acessibilidade: A propriedade order altera exclusivamente a apresentação visual óptica. Ela NÃO altera a ordem do código na Árvore DOM, a ordem de leitura por sintetizadores de voz para deficientes visuais e nem a navegação via tecla Tab do teclado! Trocar itens de lugar visualmente com order sem cuidado cria graves barreiras de acessibilidade (WCAG 2.2 Critério 1.3.2).

7. Matriz das Propriedades dos Flex Items

Propriedade Tipo de Valor Padrão Objetivo Principal
flex-basis Comprimento (px, %) ou auto auto Define o tamanho base inicial antes de crescer ou encolher.
flex-grow Número positivo (≥ 0) 0 Dita a proporção de absorção do espaço livre sobressalente.
flex-shrink Número positivo (≥ 0) 1 Dita a proporção de encolhimento caso falte espaço físico.
flex Atalho (3 valores) 0 1 auto Combina grow, shrink e basis em uma única linha padronizada.
align-self Valores de alinhamento auto Sobrescreve o align-items do pai para este filho específico.
order Número inteiro (±) 0 Modifica a ordem visual de exibição na tela.

8. Laboratório Prático: Componente de Notificação com Itens Flexíveis

No exemplo abaixo, combinamos um avatar protegido contra encolhimento (flex-shrink: 0), um corpo de mensagem que se expande para ocupar todo o espaço (flex-grow: 1) e um botão que se alinha sozinho no topo (align-self: flex-start):

HTML5 89 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Flex Items</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0f172a;
      color: #f8fafc;
      padding: 30px;
    }
 
    /* O Contêiner Pai */
    .notificacao-card {
      display: flex;
      align-items: center; /* Alinha o centro por padrão */
      gap: 16px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 18px 22px;
      max-width: 520px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    }
 
    /* Filho 1: Avatar blindado contra deformação */
    .avatar {
      flex-shrink: 0; /* Nunca esmaga o círculo! */
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
    }
 
    /* Filho 2: Mensagem que absorve todo o espaço vago */
    .conteudo-texto {
      flex-grow: 1; /* Ocupa todo o miolo disponível */
    }
 
    .conteudo-texto h4 {
      margin: 0 0 4px 0;
      font-size: 0.95rem;
      color: #38bdf8;
    }
 
    .conteudo-texto p {
      margin: 0;
      font-size: 0.85rem;
      color: #94a3b8;
      line-height: 1.4;
    }
 
    /* Filho 3: Botão de fechar rebelde alinhado ao topo */
    .btn-fechar {
      align-self: flex-start; /* Sobe para o topo ignorando o centro do pai */
      background: transparent;
      border: none;
      color: #64748b;
      font-size: 1.2rem;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      transition: color 0.2s ease;
    }
 
    .btn-fechar:hover {
      color: #ef4444;
    }
  </style>
</head>
<body>
  <h2 style="color:#e2e8f0; margin-top:0;">Demonstração Prática de Flex Items</h2>
 
  <div class="notificacao-card">
    <div class="avatar">AG</div>
    <div class="conteudo-texto">
      <h4>Atualização de Sistema Concluída</h4>
      <p>O motor da Web Academy foi atualizado com sucesso para a versão 2.0. Aproveite os novos laboratórios interativos!</p>
    </div>
    <button class="btn-fechar" title="Fechar">×</button>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste redimensionar o contêiner ou remover o flex-shrink: 0 do avatar para constatar a diferença:

⚡ Abrir no Playground IDE →

9. Resumo e Próximos Passos

  • flex-basis determina o ponto de partida do tamanho do item antes de crescer ou encolher.
  • flex-grow define a proporção para absorver o espaço sobressalente livre do contêiner.
  • flex-shrink: 0 imuniza um elemento contra esmagamentos quando o contêiner encolhe.
  • O atalho flex: 1 (equivalente a 1 1 0%) é a fórmula definitiva para colunas de larguras idênticas.
  • align-self permite que um filho ignore a regra de align-items do pai.
  • order reorganiza visualmente os itens na tela, mas exige cautela redobrada com acessibilidade.

A Grande Conclusão do Módulo 3: Agora que você conhece todas as propriedades do pai e dos filhos, é hora de colocar tudo à prova em projetos reais! Na Lição 30, fecharemos o Módulo 3 com chave de ouro: Layouts Práticos com Flexbox (Navbars, Cards de Preço, Media Objects e Rodapés Grudados)!

Rolar para cima