Flexbox no Tailwind: alinhar, distribuir e crescer

Flexbox no Tailwind usa nomes próximos das propriedades CSS: flex cria o container, flex-col troca o eixo, justify-* distribui no eixo principal e items-* alinha no eixo transversal. O trabalho difícil continua sendo saber qual eixo está ativo.

Nesta lição, a recepção da clínica vira navbar, cartão e área lateral. Cada mudança altera uma classe e mantém o conteúdo igual, para você enxergar a regra em vez de decorar uma combinação pronta.

Escolha o eixo antes de procurar alinhamento

Sem flex-direction, o eixo principal é horizontal. flex-col torna-o vertical. As classes compilam para CSS direto:

<nav class="flex flex-row">...</nav>
<article class="flex flex-col">...</article>

Pense numa fila desenhada no chão. flex-direction gira a fila; não gira as palavras “justify” e “items”. Depois da rotação, justify-content acompanha a fila e align-items atravessa a fila. Essa imagem deixa de explicar wrapping, porque várias linhas criam outro nível de alinhamento.

justify-* e items-* respondem perguntas diferentes

Uma navbar distribui marca e ações no eixo principal e centraliza tudo na altura.

<nav class="flex items-center justify-between gap-4">
  <strong>Patinha Feliz</strong>
  <div class="flex items-center gap-2">...</div>
</nav>

justify-between só mostra efeito quando sobra espaço. Se os filhos ocupam todo o container, não há nada para distribuir. Essa é uma causa comum de “a classe não funciona” que não envolve o compilador.

Gap pertence ao grupo

Para dois botões vizinhos, escreva a distância no pai. Assim o primeiro e o último não ganham margem externa acidental.

<div class="flex items-center gap-2">
  <button>Cancelar</button>
  <button>Confirmar</button>
</div>

Se apenas o segundo botão precisa se afastar, a relação mudou. ms-auto absorve o espaço inline antes dele:

<nav class="flex items-center gap-4">
  <a href="#agenda">Agenda</a>
  <a href="#pacientes">Pacientes</a>
  <button class="ms-auto">Entrar</button>
</nav>

Essa solução preserva a proximidade dos links e separa a ação. A lição de espaçamento no Tailwind aprofunda por que gap e margin cumprem papéis diferentes.

Crescer, encolher e começar de um tamanho

flex-1 permite crescer e encolher, ignorando o tamanho inicial. flex-none preserva um item. basis-1/3 define a base antes da distribuição.

<div class="flex gap-6">
  <main class="min-w-0 flex-1">Lista de consultas</main>
  <aside class="basis-1/3 flex-none">Resumo</aside>
</div>

O min-w-0 no conteúdo principal é deliberado. Por padrão, um item flexível pode se recusar a encolher abaixo do tamanho mínimo do conteúdo. Uma observação longa então empurra a sidebar para fora, embora flex-1 esteja presente.

Navbar que muda de eixo sem trocar semântica

Comece empilhada no mobile e vire linha a partir de md:

<nav class="flex flex-col gap-4 p-4 md:flex-row md:items-center md:p-8">
  <strong>Patinha Feliz</strong>
  <a href="#agenda">Agenda</a>
  <button class="md:ms-auto">Entrar</button>
</nav>

Sem prefixo é o estado base. O prefixo md: não significa “tablet”; significa que a regra passa a valer quando a largura chega a 48rem. Esse raciocínio volta com detalhes em Tailwind responsivo.

Não inverta visualmente os itens com order-* só para fazer o mobile “ficar bonito”. Teclado e leitor de tela continuam seguindo a ordem do HTML. Prefira uma estrutura semântica que funcione nos dois tamanhos.

Cartão com ação no rodapé

Um cartão pode ser coluna e usar mt-auto para empurrar a ação, desde que tenha altura disponível.

<article class="flex min-h-64 flex-col gap-4 rounded-xl p-6">
  <h2 class="text-xl font-bold">Vacinação anual</h2>
  <p class="text-slate-600">Orientações e documentos necessários.</p>
  <a class="mt-auto" href="#detalhes">Ver detalhes</a>
</article>

mt-auto absorve a sobra acima do link. Se o cartão não possui altura mínima e o conteúdo já define toda a altura, não existe sobra; novamente, não é falha de classe.

Formulário: rótulo precisa continuar ligado ao campo

Flex organiza apresentação, não substitui label. Uma linha de busca pode empilhar no mobile sem quebrar o vínculo acessível.

<div class="flex flex-col gap-2 sm:flex-row sm:items-end">
  <label class="flex flex-1 flex-col gap-1">
    <span>Nome do paciente</span>
    <input class="min-w-0" name="paciente">
  </label>
  <button>Buscar</button>
</div>

Dar flex-1 diretamente ao input sem considerar o label muda o item que participa do container. Sempre identifique filhos diretos antes de aplicar flexibilidade.

Quando envolver e quando mudar para Grid

flex-wrap permite várias linhas, útil para tags cujo tamanho vem do conteúdo.

<ul class="flex flex-wrap gap-2">
  <li>Vacinação</li><li>Retorno</li><li>Exames</li><li>Cirurgia</li>
</ul>

Se você precisa que colunas e linhas compartilhem trilhos, Flexbox começa a pedir larguras coordenadas em cada filho. Nesse ponto, o container deve mandar na malha e Grid no Tailwind é a ferramenta mais clara.

Erro reproduzido: alinhamento que mistura dois eixos

items-between combina palavras de famílias diferentes e não existe. Enviei o caso mínimo ao CLI 4.3.3:

@import "tailwindcss";
.qa { @apply items-between; }

printf '@import "tailwindcss"; .qa { @apply items-between; }\n' | npx @tailwindcss/cli@4.3.3 -i - -o /dev/null

O processo encerrou com código 1. No eixo cruzado escolha um items-* válido; para distribuir espaço no eixo principal, use justify-between.

Diagnóstico por eixo

Quando um alinhamento falhar, faça três perguntas: qual elemento tem flex, qual é o eixo principal e existe espaço livre? Depois verifique se o item que precisa encolher tem min-w-0. Só então troque classes. A missão é montar a navbar e o cartão acima, mudar flex-row para flex-col e explicar por que justify-* passou a atuar verticalmente. A explicação, não a aparência, encerra a aula.

Teste com conteúdo que força o algoritmo

Substitua “Agenda” por um título com cinco palavras, coloque uma URL longa no conteúdo principal e aumente o texto para 200%. Esses casos revelam shrink, tamanho mínimo e wrapping de forma mais confiável que caixas coloridas vazias. Quando algo estourar, não esconda com overflow antes de localizar qual item se recusa a encolher.

Inspecione os filhos diretos. Uma classe flex-1 no neto não participa da distribuição feita pelo avô; cada contexto flexível possui seus próprios itens. Desenhe uma linha ao redor do container atual no DevTools e identifique eixo, espaço livre e tamanho base de cada filho. Esse roteiro transforma um problema visual em valores observáveis.

Depois verifique a ordem. Reorganizar com order-* pode deixar a apresentação diferente da sequência do teclado. Se a navbar precisa mostrar ação primeiro no mobile, pergunte se essa também deveria ser a primeira informação no HTML. Uma solução resistente mantém semântica e visual alinhados. O guia completo de Tailwind conecta esse cuidado a estados, tema e componentes, onde o layout precisa sobreviver a mais do que uma captura.

Guarde um caso mínimo com bordas temporárias no container e nos filhos. Ele vira referência de depuração para o próximo alinhamento e impede que a equipe volte a usar margens numéricas como empurrão.