Gerador Flexbox

Construtor Visual de Flexbox com Visualização e Exportação de Código

Um gerador de CSS Flexbox interativo e ferramenta de aprendizado. Visualize como as propriedades do flexbox funcionam em tempo real. Ajuste propriedades de container e items com visualização instantânea. Exporte código CSS usando o flex shorthand canônico mais um bloco de marcação HTML correspondente, para colar um trecho completo de container e items direto no seu projeto.

O que é CSS Flexbox?

CSS Flexbox (Flexible Box Layout) é um método de layout unidimensional para organizar items em linhas ou colunas. Torna layouts complexos simples e responsivos.

Conceitos principais:

Flex Container:
- Elemento pai com display: flex
- Controla arranjo dos items filhos
- Propriedades: flex-direction, flex-wrap, justify-content, align-items, gap

Flex Items:
- Filhos diretos do flex container
- Podem crescer, encolher e alinhar independentemente
- Propriedades: flex-grow, flex-shrink, flex-basis, align-self, order

Vantagens:
- Centralização vertical fácil
- Colunas de altura igual
- Espaçamento flexível
- Responsivo sem media queries
- Reordenar items visualmente

Como flex-direction funciona?

flex-direction define o eixo principal e fluxo de items:

Valores:
- row (padrão): Esquerda para direita →
- row-reverse: Direita para esquerda ←
- column: Cima para baixo ↓
- column-reverse: Baixo para cima ↑

Eixo Principal vs Eixo Cruzado:
- row: eixo principal = horizontal, cruzado = vertical
- column: eixo principal = vertical, cruzado = horizontal

Isso afeta:
- justify-content (alinhamento eixo principal)
- align-items (alinhamento eixo cruzado)
- interpretação de flex-basis

Qual a diferença entre justify-content e align-items?

Eles controlam alinhamento em diferentes eixos:

justify-content (Eixo Principal):
- flex-start: Agrupar items no início
- flex-end: Agrupar items no final
- center: Centralizar items
- space-between: Espaço uniforme entre items
- space-around: Espaço uniforme ao redor dos items
- space-evenly: Espaço igual em todos os lugares

align-items (Eixo Cruzado):
- stretch: Esticar para preencher container
- flex-start: Alinhar ao início
- flex-end: Alinhar ao final
- center: Centralizar items
- baseline: Alinhar linhas de base do texto

Padrões comuns:
center + center = Centralização perfeita
space-between + center = Barra de navegação
flex-start + stretch = Layout sidebar

Como flex-grow, flex-shrink e flex-basis funcionam?

Estes controlam como items se dimensionam:

flex-grow (padrão: 0):
- Quanto o item cresce relativo a outros
- 0 = não crescer
- 1 = crescer igual a outros items flex-grow: 1
- 2 = crescer o dobro de items flex-grow: 1

flex-shrink (padrão: 1):
- Quanto o item encolhe quando espaço é apertado
- 0 = não encolher
- 1 = encolher igualmente
- Maior = encolher mais

flex-basis (padrão: auto):
- Tamanho inicial antes de crescer/encolher
- auto = usar conteúdo/width/height
- 0 = ignorar tamanho do conteúdo
- 200px = começar em 200px
- 25% = começar em 25% do container

Quais são os padrões de layout flexbox comuns?

Padrões flexbox populares:

Centralização:
justify-content: center;
align-items: center;

Barra de Navegação:
justify-content: space-between;
align-items: center;

Colunas de Largura Igual:
.item { flex: 1; }

Layout Sidebar:
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }

Holy Grail (3 colunas):
.left { flex: 0 0 200px; }
.center { flex: 1; }
.right { flex: 0 0 200px; }

Grade de Cards:
flex-wrap: wrap;
gap: 20px;
.card { flex: 0 0 calc(33.33% - 20px); }

Esta ferramenta inclui esses como presets!

O que significa o flex shorthand (flex: grow shrink basis)?

flex é a abreviação de flex-grow, flex-shrink e flex-basis nessa ordem. A maioria dos projetos e linters espera essa forma em vez de três linhas separadas, por isso esta ferramenta a gera por padrão (desative para ver a forma longa).

flex: 1 1 0 → cresce para preencher, pode encolher, ignora o tamanho do conteúdo (colunas iguais)
flex: 0 0 200px → fixo em 200px, nunca cresce nem encolhe (sidebar)
flex: 1 1 auto → cresce mas parte do tamanho do conteúdo

Formas de valor único comuns:
flex: 1 = flex: 1 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto
flex: initial = flex: 0 1 auto (o padrão)

Casos limite:
- Um valor único sem unidade (flex: 1) define flex-basis como 0, não auto. Isso confunde: flex: 1 colapsa para conteúdo zero, enquanto flex-grow: 1 sozinho mantém flex-basis: auto.
- Inclua sempre uma unidade no basis (0% ou 0px) se quiser ser explícito.

Flexbox vs CSS Grid: quando usar cada um?

Eles resolvem problemas diferentes e frequentemente trabalham juntos.

Use Flexbox para layouts unidimensionais (uma única linha ou coluna): barras de navegação, toolbars, grupos de botões, centralizar um elemento, distribuir items ao longo de um eixo com gap e justify-content. Flexbox parte do conteúdo.

Use CSS Grid para layouts bidimensionais (linhas e colunas ao mesmo tempo): templates de página, galerias, dashboards, qualquer coisa com trilhas explícitas e alinhamento nas duas direções. Grid parte da estrutura.

Regra prática:
- Alinhar items em uma linha → Flexbox
- Construir uma grade real de linhas e colunas → Grid
- Uma página real costuma usar Grid para o esqueleto e Flexbox dentro de cada célula.

Ambos suportam a propriedade gap e as mesmas palavras-chave de alinhamento (justify-content, align-items).

Recursos Principais

• Visualização ao vivo interativa
• Todas propriedades do container (direction, wrap, justify, align)
• Todas propriedades de items (grow, shrink, basis, align-self, order)
• Adicionar e remover flex items
• Clique em items para editar propriedades individuais
• Controle de gap para espaçamento
• 8 padrões de layout predefinidos
• Copiar código CSS pronto para usar
• Saída com flex shorthand canônico (ativável/desativável)
• Bloco de marcação HTML correspondente copiável
• Ferramenta de aprendizado visual
• Processamento 100% do lado do cliente