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.

Resumo rápido

O Playground CSS Flexbox é uma página interativa para aprender o módulo CSS Flexible Box Layout. Você ajusta as propriedades do contêiner e dos itens, vê o layout mudar e copia o CSS e o HTML gerados.

Playground CSS Flexbox: recursos em resumo

Recurso	O que você obtém	Indicado para
Controles do contêiner	Defina flex-direction, flex-wrap, justify-content, align-items, align-content e gap com controles segmentados. A área de prévia é atualizada conforme você muda os valores.	Ver como cada propriedade do contêiner move os itens
Ajustes por item	Clique em um item para definir order, flex-grow, flex-shrink, flex-basis e align-self. Itens com ajustes recebem um pequeno selo.	Entender como um item pode ser diferente dos irmãos
Seis predefinições	Carregue Holy Grail, Grade de Cards, Navbar, Hero, Modal Centralizado ou Rodapé Fixo como um layout para estudar ou modificar.	Partir de um padrão comum de página
Adicionar e remover itens	Use Adicionar Item e Remover Selecionado para mudar a quantidade de itens e ver como o layout responde.	Testar quebra de linha e encolhimento com mais ou menos itens
Exportação de código	A seção Código Gerado sempre corresponde ao layout atual. Copie o CSS, o HTML ou os dois.	Colar um layout pronto em um projeto
Indicadores de eixo	Pílulas de eixo abaixo da prévia mostram os eixos principal e transversal, que trocam quando você muda flex-direction.	Entender a diferença entre justify-content e align-items

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

Ferramentas de webmaster:

• Verificador de Links Quebrados Novo
• Calculadora de CPC
• Calculadora de CPM
• Gerador de Cron Job
• Gerador de Expressão Crontab
• Compactador de CSS Online
• Playground CSS Flexbox Novo
• Gerador de CSS Grid Novo
• Construtor de Comandos cURL Novo
• Conversor de cURL para JSON
• Consulta DNS Novo
• Verificador de Idade de Domínio Novo
• Verificador de Confiança de Domínio Novo
• Gerador de Arquivo .env Novo
• Gerador de Favicon
• Gerador de Comandos Git Novo
• Calculadora do Google AdSense
• Verificador de Tamanho de Rastreamento Googlebot
• Gerador de Tags Hreflang Novo
• Gerador de Redirecionamento Htaccess
• Compactador de HTML Online Popular
• Codificador/Decodificador de Entidades HTML
• Conversor de HTML para Texto
• Referência de Códigos de Status HTTP Novo
• Gerador de Esquema JSON Novo
• Escape/Unescape de String JSON
• Verificador de Densidade de Palavras-Chave
• Compilador de Less para CSS Novo
• Gerador de Lorem Ipsum
• Gerador de Tabelas Markdown
• Gerador de Meta Tag
• Verificador de Open Graph Novo
• Verificador de Velocidade da Página Novo
• Conversor de PT para PX Novo
• Conversor de PX para REM Novo
• Construtor de Query String Novo
• Verificador de Redirecionamento Novo
• Gerador de Robots.txt Novo
• Compilador de SCSS para CSS Novo
• Removedor de Aspas Inteligentes
• Formatador SQL
• Otimizador de SVG
• Conversor de SVG para React/JSX Novo
• Playground TypeScript Novo
• Calculadora de Permissões Unix (chmod)
• Analisador de URL Novo
• Gerador de Slug de URL
• Calculadora do Valor de uma Exibição de Página
• Calculadora do Valor de um Visitante
• Consulta WHOIS Novo
• Gerador de Sitemap XML Novo