Padrões Flexbox com Claude Code para layouts estáveis

Flexbox resolve problemas de interface em uma direção

Flexbox é o modelo CSS para organizar elementos em uma direção principal: linha ou coluna. Em interfaces reais, isso aparece em navegação, grupos de botões, cards de artigos, formulários curtos, busca, barras de ferramentas e CTAs no fim de um artigo. CSS Grid é melhor quando você precisa controlar linhas e colunas ao mesmo tempo. Flexbox costuma ser mais simples quando o problema é uma faixa de UI que precisa alinhar, crescer, encolher e quebrar linha sem gerar scroll horizontal.

Claude Code escreve Flexbox rapidamente, mas precisa de restrições claras. Se o prompt diz apenas “deixe responsivo”, o resultado pode ficar bom no desktop e quebrar em 360px. Um título longo pode empurrar o card. Um email pode deixar o input ilegível. Um botão de consultoria pode virar duas linhas e perder prioridade. Esses problemas aparecem quando a página tem conteúdo real, tradução e links de receita.

Este guia reúne termos básicos, um prompt reutilizável, quatro seções Use case, uma lista de Pitfall, HTML/CSS copiáveis e uma checklist de revisão. Para complementar, veja design responsivo com Claude Code, design system com Claude Code e acessibilidade com Claude Code.

As referências oficiais para revisar o código são MDN: conceitos básicos de Flexbox, flex, gap, além de CSS Flexible Box Layout Module Level 1. Use essas fontes para validar o que Claude Code gerar, em vez de aprovar só porque parece correto.

flowchart LR
  A["Necessidade real de UI"] --> B["Flex container"]
  B --> C["main axis"]
  B --> D["cross axis"]
  C --> E["gap / flex / wrap"]
  D --> F["align-items / min-width"]
  E --> G["nav, cards, formulários, CTA"]
  F --> G

Termos que o prompt deve deixar claros

O elemento com display: flex é o contêiner flex. Seus filhos diretos são os itens flex. O eixo principal é a direção do fluxo: horizontal com flex-direction: row, vertical com column. O eixo cruzado é perpendicular. justify-content distribui no eixo principal; align-items alinha no eixo cruzado.

gap define o espaço entre os itens. É mais limpo que colocar margem em cada filho, porque o espaçamento fica no contêiner e continua previsível quando há quebra de linha. flex-wrap: wrap permite que os itens passem para outra linha quando falta largura.

flex: 1 1 220px significa que o item começa com base de 220px, cresce quando há espaço e encolhe quando necessário. É bom para cards e inputs. Logos, ícones e botões curtos geralmente devem ficar com flex: 0 0 auto, preservando o tamanho do conteúdo.

A declaração pequena que evita muitos bugs é min-width: 0. Um item flex pode não encolher abaixo do tamanho do conteúdo. Com URLs, emails, slugs e títulos traduzidos, isso pode criar scroll horizontal. Use min-width: 0 no item e overflow-wrap: anywhere no texto longo.

Prompt para Claude Code

Implemente com Flexbox uma navegação responsiva, uma linha de cards, um formulário de captura e um CTA final de artigo.
Preserve o padrão atual de classes e os principais links de CTA.
No desktop use linhas horizontais; abaixo de 720px empilhe apenas onde for necessário.
Use gap para espaçamento, separe grupos de links e grupos de CTA em flex containers próprios e evite hacks com margin.
Adicione min-width: 0 e overflow-wrap onde título longo, URL ou email possam transbordar.
Retorne HTML e CSS copiáveis e revise 360px, 720px e 1024px para scroll horizontal.

“Empilhe apenas onde for necessário” evita transformar o mobile em uma coluna interminável. Às vezes os links podem quebrar linha enquanto a marca e o CTA continuam visíveis. Claude Code precisa receber essa prioridade para gerar algo revisável.

Use case 1: navegação responsiva

Navegação é o Use case clássico. Marca, links e CTA estão na mesma linha, mas têm regras diferentes. A marca não deve encolher. Os links podem quebrar linha. O CTA deve continuar fácil de tocar. Um único justify-content: space-between no header fica frágil quando novos links entram ou uma tradução fica maior.

O padrão mais seguro é Flexbox aninhado. O header organiza marca, grupo de links e CTA. O grupo de links também é um flex container com flex-wrap. Assim você pode pedir a Claude Code que apenas os links quebrem, enquanto o botão conserva altura e conteúdo.

No ClaudeCodeLab, esses links levam a produtos Claude Code ou a treinamento e consultoria. Se o CTA some no celular, a página ainda pode ser lida, mas o caminho de conversão foi quebrado.

Use case 2: cards de artigos, preços e recursos

Cards são um bom Use case quando há poucos itens: artigos relacionados, planos, recursos ou estudos de caso. Com flex: 1 1 220px, cada card começa com uma base clara, cresce quando há espaço e passa para a próxima linha quando necessário.

Para matrizes grandes e rígidas, CSS Grid pode ser melhor. Mas para dois a quatro cards que precisam alinhar e quebrar linha sem scroll, Flexbox é simples de ler e de ajustar com Claude Code.

A revisão precisa usar conteúdo realista. Teste um título longo, um slug como claude-code-flexbox-patterns-long-example e um email. Sem min-width: 0, um card pode empurrar o viewport. Com overflow-wrap, o texto permanece dentro do card.

Use case 3: formulários e busca

Formulários curtos misturam label, input e botão. O input deve ocupar espaço livre, o botão deve manter tamanho confortável e, no mobile, o grupo deve empilhar. Newsletter, busca, download de PDF e cupom sofrem quando o botão fica esmagado.

Um bom padrão é input { flex: 1 1 16rem; min-width: 12rem; } e button { flex: 0 0 auto; }. O formulário recebe flex-wrap: wrap. Quando falta largura, o botão desce para outra linha sem destruir a legibilidade do input.

Também peça semântica HTML. label for deve corresponder ao input id, email usa type="email", campos obrigatórios usam required e foco visível deve permanecer. Flexbox resolve layout, não substitui acessibilidade.

Use case 4: CTA no fim do artigo

O CTA final costuma ter uma explicação curta e duas ações. Flexbox permite que o texto use o espaço disponível enquanto o grupo de botões gerencia sua própria quebra. Neste site, leitores autônomos seguem para products e equipes que precisam de rollout seguem para training.

O Pitfall comum é centralizar tudo em um bloco com cara de anúncio. Depois de um artigo técnico, funciona melhor um fechamento discreto: texto primeiro, ações ao lado, empilhamento natural no mobile.

HTML copiável

<main class="flex-demo">
  <nav class="site-nav" aria-label="Primary">
    <a class="site-nav__brand" href="/pt/">ClaudeCodeLab</a>
    <div class="site-nav__links">
      <a href="/pt/blog/claude-code-responsive-design/">Responsivo</a>
      <a href="/pt/blog/claude-code-design-system/">Design System</a>
      <a href="/pt/blog/claude-code-accessibility/">Acessibilidade</a>
    </div>
    <a class="site-nav__cta" href="/pt/training/">Agendar revisão</a>
  </nav>

  <section class="card-row" aria-label="Use cases">
    <article class="feature-card">
      <h2>Navigation</h2>
      <p>A marca fica estável, links quebram linha e o CTA mantém tamanho tocável.</p>
      <a href="/pt/blog/claude-code-responsive-design/">Ler guia</a>
    </article>
    <article class="feature-card">
      <h2>Cards</h2>
      <p>Cards crescem a partir de uma base clara e textos longos ficam dentro.</p>
      <a href="/pt/products/">Ver produtos</a>
    </article>
    <article class="feature-card">
      <h2>Forms</h2>
      <p>Inputs usam o espaço livre e botões continuam fáceis de tocar no mobile.</p>
      <a href="/pt/training/">Pedir ajuda</a>
    </article>
  </section>

  <form class="signup-form" action="/pt/thanks/" method="post">
    <label for="email">Receba a checklist gratuita</label>
    <input id="email" name="email" type="email" placeholder="[email protected]" required />
    <button type="submit">Baixar</button>
  </form>
</main>

CSS copiável

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172026;
  background: #f6f8fb;
}

.flex-demo {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.site-nav,
.site-nav__links,
.card-row,
.signup-form {
  display: flex;
  gap: 16px;
}

.site-nav {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-nav__brand,
.site-nav__cta,
.signup-form button {
  flex: 0 0 auto;
}

.site-nav__links {
  flex: 1 1 420px;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

.card-row {
  flex-wrap: wrap;
}

.feature-card {
  flex: 1 1 220px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
}

.feature-card p {
  overflow-wrap: anywhere;
}

.signup-form {
  align-items: end;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 8px;
  background: #e8f5f3;
}

.signup-form label {
  flex: 1 1 180px;
  font-weight: 700;
}

.signup-form input {
  flex: 1 1 16rem;
  min-width: 12rem;
  min-height: 44px;
}

.signup-form button,
.site-nav__cta {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: #fff;
  background: #0f766e;
  font-weight: 700;
}

@media (max-width: 720px) {
  .site-nav,
  .signup-form {
    align-items: stretch;
  }

  .site-nav__links {
    justify-content: flex-start;
  }

  .site-nav__cta,
  .signup-form button {
    width: 100%;
  }
}

Pitfall e verificação

O primeiro Pitfall é usar flex: 1 em tudo. Cards e inputs podem crescer, mas marca e botões não. O segundo Pitfall é esquecer min-width: 0, permitindo que textos longos criem scroll horizontal. O terceiro é espaçar com margin nos filhos em vez de gap. O quarto é usar order sem testar a ordem do teclado.

Revise tags HTML, chaves CSS e nomes de classes. Depois teste 360px, 720px e 1024px. Procure scroll horizontal, botões espremidos, inputs ilegíveis e CTAs escondidos. Em seguida, peça a Claude Code uma revisão de overflow, acessibilidade e declarações desnecessárias.

Resultado verificado

Colei o HTML e o CSS em uma página local e revisei as três larguras. Os cards passaram de três colunas para duas e depois uma sem scroll horizontal. Um título longo permaneceu dentro do card com min-width: 0 e overflow-wrap: anywhere. Para padrões reutilizáveis, veja produtos Claude Code. Para rollout de equipe e revisão de UI, veja treinamento e consultoria.