Quebre linhas com flex-wrap e separe itens com gap

Uma fileira funciona até o conteúdo encontrar uma tela estreita. Se os itens não puderem encolher o suficiente, eles transbordam. Nesta aula, você permitirá que o grupo forme novas linhas e manterá intervalos consistentes sem calcular qual item está na borda.

flex-wrap controla se o container aceita uma ou várias linhas flexíveis. Pense numa fila de atendimento. Quando a primeira faixa fica cheia, uma segunda fila é aberta; cada fila organiza as próprias pessoas. O container representa a área de espera, os itens são as pessoas e cada faixa é uma linha flexível. O limite é importante: Flexbox não cria colunas alinhadas entre as linhas como uma planilha. Cada linha distribui seu espaço independentemente.

Autorize a mudança de linha

O valor inicial é nowrap. Mesmo que falte espaço, o navegador tenta manter tudo numa linha, reduzindo itens quando permitido ou deixando overflow:

.categorias {
  display: flex;
  flex-wrap: nowrap;
}

Troque para wrap e dê aos itens uma base que revele o comportamento:

.categorias {
  display: flex;
  flex-wrap: wrap;
}

.categorias a {
  flex: 1 1 10rem;
}

Cada link começa perto de 10rem, pode crescer para preencher sua linha e pode encolher antes da quebra. Quando o conjunto deixa de caber, o próximo item migra. A última linha pode ter larguras diferentes das anteriores porque calcula a própria sobra. Se você precisa de colunas alinhadas de ponta a ponta em todas as linhas, CSS Grid provavelmente expressa melhor o problema.

Use gap para falar do intervalo

Antes de gap, era comum colocar margem em todos os filhos e remover a margem do último com seletores especiais. Agora o espaço pertence ao container:

.categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

O primeiro valor é o intervalo entre linhas; o segundo, entre colunas. Com um único valor, ambos usam a mesma medida. Diferentemente da margem, gap não cria espaço extra nas bordas externas do grupo. O padding do container continua responsável por essa borda interna.

Alinhe linhas somente quando elas existem

align-items alinha itens dentro de cada linha. align-content distribui o conjunto de linhas no eixo transversal, mas só produz efeito quando há mais de uma linha e sobra espaço transversal:

.categorias {
  min-height: 18rem;
  flex-wrap: wrap;
  align-content: center;
}

Se nada mudar, confirme os dois requisitos antes de trocar valores: houve wrap de verdade e existe altura livre? Esse diagnóstico evita o erro comum de usar align-content como substituto de align-items.

Outro tropeço é declarar wrap, mas manter cada item com largura mínima maior que o próprio viewport. A quebra cria novas linhas; não torna conteúdo impossivelmente largo em responsivo. Inspecione basis, min-width e palavras que não quebram.

No laboratório, altere a largura do container e conte quantas linhas aparecem. Depois compare uma solução com margem nos links e outra com gap. A missão termina com seis filtros legíveis em 320 pixels, sem sobreposição e sem seletor “último item”. Registre também quando escolheria Grid: se a exigência for alinhar colunas entre todas as linhas, você encontrou o limite desta ferramenta.