Gerador Flexbox

Gerador CSS Flexbox - Aprenda e Crie Layouts Flex

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 pronto para usar.

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!

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
• Ferramenta de aprendizado visual
• Processamento 100% do lado do cliente