Gerador de CSS Flexbox

Propriedades do contêiner

Propriedades do item

O truque flex: 1

flex: 1 é uma abreviação para flex: 1 1 0%. Faz um item:

• Crescer para preencher o espaço disponível (crescer: 1)
• Reduzir se necessário (reduzir: 1)
• Começar do tamanho zero (base: 0%)

Para colunas de largura igual, flex: 1 em cada item proporciona uma divisão perfeita. Para barras laterais que não devem encolher abaixo do conteúdo, use flex: 0 0 240px (sem crescimento, sem encolhimento, base de 240px).

Padrões comuns

Herói centralizado

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar com logo à esquerda, links à direita

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* empurrar para a direita */
  display: flex;
  gap: 1rem;
}

Linha de cartões responsiva

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* crescer/reduzir, 260px mínimo antes de envolver */
}

Campo de formulário com botão (input flexível, botão fixo)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs. Grid

• Flexbox: uma dimensão (linha OU coluna). Melhor quando os tamanhos dos itens são impulsionados pelo conteúdo ou quando você distribui espaço ao longo de uma única linha.
• Grid: duas dimensões (linhas E colunas com trilhas explícitas). Melhor quando o layout tem estrutura de linha e coluna simultaneamente.

Para uma barra de navegação ou uma pilha de cartões: Flexbox. Para um grid de cartões de produto com várias linhas de cartões alinhados: CSS Grid. Muitas páginas reais usam ambos, um layout de página Grid com Flexbox dentro dos componentes.

Armadilhas comuns

• Itens não preenchendo o contêiner: o padrão align-items: stretch se aplica apenas se os itens não tiverem altura fixa. Com altura explícita, eles permanecem nesse tamanho.
• gap não funcionando: verifique o suporte do navegador. O gap flex chegou tarde; Safari <14.1 não o suportava. Agora é universal em 2024+.
• Filhos de coluna flex colapsando: uma coluna flex tem align-items: stretch como padrão, o que estica os itens para a largura do contêiner. Se um filho definir uma largura, ele se rompe.
• order é apenas visual: leitores de tela e navegação por teclado seguem a ordem do DOM. Não use order para fazer o conteúdo fazer sentido; use-o apenas para polimento visual.