Playground CSS Flexbox

Playground CSS Flexbox

O Playground CSS Flexbox é um ambiente de aprendizado interativo e gerador de código para o moderno módulo CSS Flexible Box Layout. Ajuste as propriedades do contêiner (flex-direction, justify-content, align-items, gap) e as propriedades por item (flex-grow, flex-shrink, flex-basis, align-self, order) e observe seu layout ser atualizado em tempo real. Quando tiver algo que goste, copie o CSS e HTML prontos para colar direto em seu projeto.

O que é CSS Flexbox?

O CSS Flexbox (Flexible Box Layout) é um modelo de layout unidimensional projetado para distribuir espaço ao longo de um único eixo (uma linha ou uma coluna) e alinhar itens dentro de um contêiner. Ele substitui técnicas antigas como floats e truques de inline-block para barras de navegação, linhas de cartões, conteúdo centralizado e qualquer interface onde os elementos precisem se flexionar naturalmente ao seu contêiner. Ao contrário do CSS Grid, que é bidimensional, o Flexbox se destaca em arranjos mais simples onde você controla o alinhamento em apenas uma direção por vez.

Como Usar Este Playground

1. Escolha uma predefinição (opcional): Escolha Holy Grail, Card Grid, Navbar, Hero, Modal ou Sticky Footer para carregar um ponto de partida do mundo real. Cada predefinição é um layout funcional completo que você pode estudar ou modificar.
2. Ajuste as propriedades do contêiner: Use os controles segmentados no painel direito para definir flex-direction, flex-wrap, justify-content, align-items, align-content e gap. O estágio visual é atualizado imediatamente.
3. Edite itens individuais: Clique em qualquer item na pré-visualização para selecioná-lo. Substitua seu order, flex-grow, flex-shrink, flex-basis e align-self independentemente dos demais. Itens com substituições são marcados com um pequeno selo.
4. Adicione ou remova itens: Use Adicionar Item e Remover Selecionado para alterar a contagem de itens e ver como o layout responde.
5. Copie o código: A seção Código Gerado na parte inferior sempre reflete seu layout atual. Copie CSS, HTML ou ambos com um clique.

Referência de Propriedades do Contêiner

O contêiner flex é o elemento pai com display: flex. Estas propriedades controlam como todos os seus filhos se comportam juntos.

Referência de Propriedades do Item

Estas propriedades são aplicadas em itens flex individuais (filhos de um contêiner flex) e substituem os padrões do contêiner apenas para esse item.

Qual é a Diferença Entre justify-content e align-items?

justify-content controla o alinhamento ao longo do eixo principal, enquanto align-items controla o alinhamento ao longo do eixo transversal. O eixo principal é qualquer direção que o flex-direction definir — horizontal para row, vertical para column. Quando você altera o flex-direction de row para column, os dois eixos trocam de lugar, de modo que justify-content torna-se vertical e align-items torna-se horizontal. Essa troca é uma das fontes mais comuns de confusão quando as pessoas aprendem Flexbox; os indicadores de eixo do playground abaixo da visualização ajudam a torná-la visível.

Como Centralizo um Elemento com Flexbox?

Para centralizar um único elemento tanto horizontal quanto verticalmente:

Este é o substituto moderno para truques de centralização antigos que envolviam margin: auto, transform: translate(-50%, -50%) ou position: absolute. Experimente no playground selecionando a predefinição Modal Center.

Predefinições de Layout do Mundo Real Explicadas

Layout Holy Grail

O clássico layout de página de três colunas: barra lateral esquerda, conteúdo principal, barra lateral direita — com cabeçalho e rodapé. Historicamente muito difícil de construir com floats; o Flexbox torna isso trivial. A coluna do meio usa flex: 1 para absorver todo o espaço horizontal restante enquanto as colunas laterais permanecem em suas larguras declaradas.

Grade de Cartões (Card Grid)

Uma linha de cartões que quebra em novas linhas conforme a janela de visualização diminui. Usa flex-wrap: wrap com cada cartão recebendo flex: 1 1 240px, o que significa que o cartão cresce e encolhe, mas nunca fica mais estreito que 240px.

Barra de Navegação (Navbar)

Uma barra de navegação horizontal com um logotipo à esquerda e links à direita. O truque é justify-content: space-between com o logotipo e o grupo de links como os dois filhos, além de um contêiner flex interno para os próprios links.

Seção Hero

Pilha vertical com conteúdo centralizado tanto horizontal quanto verticalmente — perfeita para áreas hero de landing pages. Usa flex-direction: column, justify-content: center e align-items: center em um contêiner alto.

Centralização de Modal (Modal Center)

Um diálogo modal perfeitamente centralizado dentro de sua sobreposição. A mesma receita de centralização de três linhas mostrada acima, aplicada a um contêiner de sobreposição de tela cheia.

Rodapé Fixo (Sticky Footer)

Um rodapé que fica na parte inferior da tela quando o conteúdo é curto, mas é empurrado para baixo quando o conteúdo é longo. Conseguido ao dar ao body display: flex; flex-direction: column; min-height: 100vh e ao conteúdo principal flex: 1.

Qual é a Diferença Entre flex-grow, flex-shrink e flex-basis?

Essas três propriedades (combinadas no atalho flex) descrevem como um item lida com o espaço:

• flex-basis define o tamanho ideal do item antes que qualquer espaço livre seja distribuído. Pense nisso como o "ponto de partida" do item.
• flex-grow diz "se sobrar espaço, pegue esta parte dele". Um valor de 0 significa recusar-se a crescer; 1 significa crescer proporcionalmente; 2 significa pegar o dobro da parte de um item com 1.
• flex-shrink diz "se não houver espaço suficiente, encolha por esta parte". O padrão é 1 (encolher proporcionalmente); 0 significa recusar-se a encolher.

O atalho flex: 1 expande para flex: 1 1 0% — crescimento igual, encolhimento igual, base zero — o que significa que todos os itens ocupam uma parte igual do contêiner, independentemente do conteúdo. flex: auto expande para flex: 1 1 auto, que respeita o tamanho do conteúdo como base.

Quando Devo Usar Flexbox vs Grid?

Use o Flexbox para layouts unidimensionais onde os itens fluem em uma única direção — uma linha de botões, uma navbar, uma única coluna de cartões. O Flexbox reconhece o conteúdo e é ótimo quando você quer que os itens se dimensionem por conta própria.

Use o CSS Grid para layouts bidimensionais onde você precisa controlar as linhas e colunas simultaneamente — layouts de página inteira, galerias de imagens, painéis. O Grid reconhece o layout e permite colocar itens em trilhas nomeadas.

Os dois são complementares, não concorrentes. Muitos designs reais os combinam: um layout de página em Grid com navbars e linhas de cartões em Flexbox dentro.

Dicas para Dominar o Flexbox

• Visualize os eixos. Saiba sempre qual direção é a "principal" (main) e qual é a "transversal" (cross) — os indicadores de eixo do playground tornam isso explícito.
• Use gap em vez de margens. Os navegadores modernos suportam totalmente o gap em contêineres flex e isso elimina a necessidade de truques estranhos de margem no último filho.
• Aposte no flex: 1. Quando você quer que os itens compartilhem o espaço igualmente, este atalho é quase sempre o que você deseja.
• min-width: 0 em itens flex. Os itens têm uma largura mínima implícita baseada em seu conteúdo. Se strings longas inquebráveis (como URLs) fizerem seu layout transbordar, defina min-width: 0 no item para substituir isso.
• Evite larguras apenas em porcentagem. Misturar larguras em porcentagem com flex-grow pode produzir resultados surpreendentes. Prefira flex-basis com um padrão sensato.

Suporte do Navegador e Compatibilidade

O CSS Flexbox é compatível com todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e todos os principais navegadores móveis. A propriedade gap em contêineres flex alcançou suporte universal em 2021. Navegadores legados mais antigos (IE10/11) exigem prefixos de fornecedor e possuem vários bugs documentados; para esses públicos, considere flexbugs.

Perguntas Frequentes

Por que meu item flex está transbordando do contêiner?

Os itens flex têm um min-width: auto implícito baseado em seu conteúdo. Palavras longas, blocos de código ou texto pré-formatado podem forçar um item a ser mais largo que o contêiner. Corrija isso definindo min-width: 0 no item (ou min-height: 0 para layouts de coluna).

Qual é a diferença entre space-between, space-around e space-evenly?

space-between não coloca espaço nas extremidades e coloca espaço igual entre os itens. space-around coloca metade de um espaço em cada extremidade e espaços inteiros entre os itens. space-evenly coloca espaço igual nas extremidades e entre os itens. Alterne entre eles no playground para sentir a diferença.

Posso animar propriedades flex?

Sim. flex-grow, flex-shrink, flex-basis, order e gap podem ter transições. A animação de flex-direction, justify-content e align-items não é suportada porque são propriedades enumeradas discretas.

O playground funciona offline?

Todo o cálculo do Flexbox acontece no seu navegador usando CSS nativo. Assim que a página for carregada, você poderá usar o playground sem uma conexão com a internet — não há chamadas de API ou computação no lado do servidor.

O código gerado está pronto para produção?

Sim. O CSS exportado usa propriedades padrão suportadas em todos os navegadores modernos. O HTML usa nomes de classes semânticos (flex-container, flex-item) que você pode renomear para se adequar às convenções do seu projeto.

Recursos Adicionais

• Layout de Caixa Flexível CSS - MDN
• Módulo de Layout de Caixa Flexível CSS Nível 1 - Especificação W3C
• CSS Flex Box Layout - Wikipédia

Outras ferramentas relacionadas:

Ferramentas de webmaster:

• Calculadora de CPC
• Calculadora de CPM
• Compactador de CSS Online
• Gerador de Favicon Novo
• Calculadora do Google AdSense
• Gerador de Cron Job Em Destaque
• Gerador de Expressão Crontab Novo
• Compactador de HTML Online Em Destaque
• Conversor de HTML para Texto Em Destaque
• Verificador de Densidade de Palavras-Chave Novo
• Gerador de Tabelas Markdown Em Destaque
• Gerador de Meta Tag
• Removedor de Aspas Inteligentes Em Destaque
• Gerador de Slug de URL Em Destaque
• Calculadora do Valor de uma Exibição de Página
• Calculadora do Valor de um Visitante
• Calculadora de Permissões Unix (chmod) Em Destaque
• Codificador/Decodificador de Entidades HTML Em Destaque
• Gerador de Lorem Ipsum Novo
• Escape/Unescape de String JSON Em Destaque
• Conversor de cURL para JSON Novo
• Formatador SQL Novo
• Otimizador de SVG Novo
• Gerador de Redirecionamento Htaccess Novo
• Verificador de Tamanho de Rastreamento Googlebot Novo
• Gerador de Robots.txt Novo
• Gerador de Sitemap XML Novo
• Verificador de Idade de Domínio Novo
• Verificador de Open Graph Novo
• Consulta WHOIS Novo
• Consulta DNS Novo
• Verificador de Velocidade da Página Novo
• Verificador de Confiança de Domínio Novo
• Verificador de Redirecionamento Novo
• Gerador de Tags Hreflang Novo
• Verificador de Links Quebrados Novo
• Playground CSS Flexbox Novo