Gerador de CSS Flexbox

Como usar

1. Defina as propriedades do contêiner : configure o contêiner flex, flex-direction, justify-content, align-items, flex-wrap e gap.
2. Adicione e configure os itens flex : adicione itens filhos e defina flex-grow, flex-shrink, flex-basis, align-self e order individualmente.
3. Copie o CSS : obtenha o CSS completo para o contêiner e os itens, pronto para usar no seu projeto.

Por que usar o gerador Flexbox ?

O Flexbox é a ferramenta essencial para um layout CSS unidimensional, alinhar itens em linha ou em coluna com controles poderosos de distribuição e alinhamento. Mas as propriedades são muitas e suas interações complexas : justify-content versus align-items, flex-grow versus flex-basis, eixo principal versus eixo transversal. Este gerador interativo fornece feedback visual instantâneo ao modificar cada propriedade, tornando-o a maneira mais rápida de aprender Flexbox e obter o CSS adequado para seu layout.

Funcionalidades

• Pré-visualização interativa : arraste os itens flex e ative as propriedades para ver as mudanças em tempo real.
• Todas as propriedades do contêiner : flex-direction, flex-wrap, justify-content, align-items, align-content e gap.
• Controle por item : defina flex-grow, flex-shrink, flex-basis, align-self e order individualmente para cada item.
• Indicadores de eixo visuais : o eixo principal e o eixo transversal são destacados para reforçar o modelo conceitual.
• Saída CSS : CSS completo, pronto para copiar, para o contêiner e todos os itens configurados.

Perguntas frequentes

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

justify-content distribui os itens ao longo do eixo principal (horizontal por padrão). align-items alinha os itens ao longo do eixo transversal (vertical por padrão). Quando flex-direction é column, os eixos se invertem, justify-content fica vertical e align-items fica horizontal.

Quando usar Flexbox ou CSS Grid ?

Use Flexbox para layouts unidimensionais, uma fileira de botões, uma barra de navegação, uma lista de cards que precisa quebrar linha. Use CSS Grid para layouts bidimensionais em que você precisa controlar linhas e colunas simultaneamente, como um layout completo ou uma grade de cards complexa.

O que significa flex: 1 ?

flex: 1 é um atalho para flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Isso indica ao item para crescer e preencher o espaço disponível, encolher se necessário, e partir de zero antes de distribuir o espaço. Todos os itens com flex: 1 compartilham o espaço de forma equitativa.

O que o Flexbox realmente faz

Flexbox (Flexible Box Layout) é um modelo de layout CSS projetado para distribuir espaço e alinhar itens em uma direção unidimensional: seja uma linha ou uma coluna. Ele introduz dois conceitos centrais que determinam como tudo se comporta: o eixo principal (a direção primária na qual os itens fluem, horizontal por padrão) e o eixo transversal (perpendicular ao principal, vertical por padrão). Uma vez que você internalize principal vs transversal, cada propriedade do Flexbox mapeia para um deles: justify-content trabalha no eixo principal, align-items trabalha no eixo transversal, flex-direction troca qual eixo é qual.

Flexbox resolveu um conjunto de problemas de layout que atormentaram desenvolvedores web de 1998 a 2014. Antes do Flexbox, centrar um elemento verticalmente exigia hacks (display: table-cell, margens negativas, position: absolute com transformações translate). Colunas de altura igual exigiam a técnica de «colunas falsas» com imagens de fundo. Rodapés grudados precisavam de cálculos precisos em pixels. Flexbox tornou todos esses triviais: uma declaração de uma linha substitui décadas de soluções alternativas em CSS. A troca é que o Flexbox é unidimensional; para layouts bidimensionais (linha E coluna simultaneamente), CSS Grid (lançado em 2017) é a melhor ferramenta.

As propriedades do Flexbox se dividem claramente em dois grupos: propriedades do contêiner (aplicadas ao pai: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) e propriedades dos itens (aplicadas aos filhos: flex-grow, flex-shrink, flex-basis, align-self, order). As propriedades do contêiner controlam padrões de layout; as propriedades dos itens controlam exceções individuais. Este gerador apresenta ambos os conjuntos para que você possa experimentar como eles interagem sem escrever código.

Como esta ferramenta funciona nos bastidores

A pré-visualização ao vivo é um contêiner flex com elementos filhos de exemplo. À medida que você altera as propriedades do contêiner (flex-direction, justify-content, etc.) através de menus suspensos e entradas, JavaScript atualiza o estilo inline do contêiner de pré-visualização, e o navegador re-renderiza o layout. A pré-visualização é a implementação real do Flexbox do navegador, não uma simulação JavaScript: você vê exatamente o que seu CSS produzirá em uma página real.

Controles por item permitem que você ajuste cada filho individualmente. Você pode adicionar ou remover itens, definir seus valores de flex-grow, flex-shrink, flex-basis, align-self e order, e ver como o contêiner redistribui o espaço de acordo. Indicadores visuais de eixo mostram os eixos principal e transversal para a configuração atual, reforçando o modelo mental. As propriedades são CSS real que você pode copiar diretamente para sua folha de estilo, sem necessidade de transpilação ou prefixos de framework.

O painel CSS gerado é atualizado a cada interação, produzindo duas regras CSS: uma para o contêiner (com as propriedades flex escolhidas) e uma para os itens. Clique em Copiar CSS e as regras são escritas em sua área de transferência. A ferramenta em si nunca faz requisições de rede; a renderização de pré-visualização, geração de código e escrita na área de transferência todas acontecem em JavaScript no seu dispositivo. Atualize a página e sua configuração se foi a menos que você tenha copiado o CSS primeiro.

Breve história do Flexbox

• Caos de layout CSS 2.1, 1998 a 2008.Antes do Flexbox, desenvolvedores web usavam float: left com hacks de clearfix, display: inline-block com bugs de espaço em branco, ou display: table com truques de table-cell para layout. Centralização vertical exigia vertical-align em table-cells, truques de margem negativa ou posicionamento absoluto. Colunas iguais exigiam JavaScript. A comunidade web gera milhares de posts de blog sobre soluções alternativas «como fazer X com CSS».
• Primeiro rascunho do Flexible Box, 2009.O W3C CSS Working Group publica o primeiro Working Draft do CSS Flexible Box Layout Module em julho de 2009, com três sintaxes evoluindo nos próximos cinco anos: a sintaxe box-* original (rapidamente obsoleta), a sintaxe intermediária flexbox de 2011 (ainda vista em código legado do IE 10), e a sintaxe final flex que usamos hoje.
• Suporte do navegador se estabiliza, 2014.Chrome 29, Firefox 28, Safari 9 e IE 11 todos enviam Flexbox funcionando até 2014, com IE 11 retendo casos extremos com bugs. A transição de «Flexbox é o futuro» para «Flexbox é o presente» acontece em 2014-2015 conforme sites de produção o adotam para layouts principais. O «Holy Grail Layout» (cabeçalho, rodapé, duas barras laterais, conteúdo principal) se torna trivial.
• «A Complete Guide to Flexbox» de Chris Coyier, 2013.CSS-Tricks publica o guia completo de Flexbox de Chris Coyier (abril de 2013), que se torna a referência canônica. Em 2016, o guia está entre os principais resultados para qualquer pergunta sobre Flexbox e é traduzido em dezenas de idiomas. Acelera dramaticamente a adoção do Flexbox.
• CSS Grid chega como complemento, 2017.CSS Grid Layout é enviado no Chrome 57, Firefox 52 e Safari 10.1 (março de 2017). Longe de substituir o Flexbox, o Grid o complementa: Flexbox se destaca em layouts unidimensionais de linha/coluna, Grid se destaca em layouts bidimensionais. Designs modernos tipicamente usam ambos: Grid para estrutura em nível de página, Flexbox para arranjos internos de componentes (itens de navegação, grupos de botões, conteúdo de cartão).
• Propriedade gap e subgrid pousam, 2020 a 2024.A propriedade gap (originalmente apenas Grid) torna-se compatível com Flexbox em todos os principais navegadores até Safari 14.1 (abril de 2021). A sintaxe mais limpa gap: 1rem substitui os padrões mais antigos de «margem em cada filho exceto o último». CSS Subgrid (2023+) permite que grades aninhadas se alinhem com as trilhas de grade dos pais, útil para layouts de sistemas de componentes.

Fluxos do mundo real

• Barras de navegação.Uma navegação horizontal com logo à esquerda e links à direita é o caso de uso canônico do Flexbox. display: flex; justify-content: space-between; align-items: center; no contêiner de nav, e está feito. Adicione gap: 1.5rem para espaçamento entre links. Este CSS de 4 linhas substitui o que costumava exigir floats, clearfix e matemática de margem com perfeição de pixels.
• Centralização vertical e horizontal.A pergunta clássica «como centralizo esta div?» tem uma resposta Flexbox: display: flex; justify-content: center; align-items: center; no pai. Funciona independentemente do tamanho intrínseco do filho, independentemente da altura do pai, independentemente de mudanças de conteúdo dinâmico. Esta é a maior melhoria individual de qualidade de vida que o Flexbox trouxe ao desenvolvimento web.
• Layouts de lista de cartões com quebra.Uma linha de cartões que quebra para múltiplas linhas em telas estreitas: display: flex; flex-wrap: wrap; gap: 1rem; no contêiner, e flex: 1 1 250px em cada cartão. Os cartões crescem para preencher o espaço disponível, encolhem até 250px mínimo, e quebram para novas linhas quando 250px não cabe. Design responsivo sem media queries.
• Linhas de formulário com entradas rotuladas.Formulários frequentemente precisam que rótulos e entradas sejam alinhados: display: flex; gap: 0.5rem; na linha, flex: 0 0 120px no rótulo (largura fixa de 120px), flex: 1 na entrada (preenche o espaço restante). Redimensionar o contêiner do formulário mantém o rótulo fixo e estica a entrada. Mais fácil que CSS Grid para linhas de formulário de duas colunas.
• Rodapés grudados.Fazer com que o rodapé grude no fundo da viewport quando o conteúdo é curto, mas siga o conteúdo quando é longo: body { display: flex; flex-direction: column; min-height: 100vh; } com main { flex: 1 } empurra o rodapé para baixo. O problema clássico do «rodapé grudado» resolvido em três declarações CSS, substituindo as soluções alternativas de margem negativa dos anos 2010.
• Grupos de tags e emblemas.Listas de tags, chips ou emblemas que devem fluir horizontalmente e quebrar para novas linhas: display: flex; flex-wrap: wrap; gap: 0.5rem;. Cada tag se dimensiona, e o contêiner lida com o arranjo. Muito usado em UIs de filtragem, marcação de conteúdo, interfaces de busca. Combina bem com o seletor :has() para estilo dependente do estado.

Armadilhas comuns e o que significam

• A armadilha min-width: auto.Os itens flex têm um min-width: auto implícito (ou min-height: auto para direções de coluna) que impede que eles encolham abaixo do tamanho mínimo intrínseco do seu conteúdo. Isso faz com que padrões overflow: hidden e truncamento de texto falhem inesperadamente dentro de contêineres flex. Correção: defina explicitamente min-width: 0 no item flex problemático. Esta é a causa mais comum de «por que meu layout flex está quebrado?».
• Confusão flex-basis vs width.flex-basis é o tamanho inicial de um item flex ao longo do eixo principal, antes dos cálculos de crescimento/encolhimento. width (ou height para direções de coluna) é o tamanho CSS regular. Quando ambos são definidos, flex-basis ganha. A abreviação flex: 1 1 200px define flex-basis para 200px. Para a maioria dos casos, prefira flex-basis sobre width dentro de contêineres flex por clareza.
• Suporte de gap em navegadores mais antigos.A propriedade gap era originalmente apenas para Grid e chegou ao Flexbox mais recentemente: Safari 14.1 (abril de 2021), e antes no Chrome/Firefox. Para projetos que suportam Safari antigo (ou WebView antigo em apps iOS), forneça fallbacks usando margens nos filhos. A maioria dos projetos modernos pode usar gap com segurança; verifique seus alvos específicos de suporte de navegador.
• O flex-shrink padrão pode causar dimensionamento inesperado.Itens flex padrão para flex-shrink: 1, significando que podem encolher abaixo de sua largura declarada se o contêiner for muito estreito. Para manter um elemento em sua largura declarada independentemente do espaço disponível, defina flex-shrink: 0. Comum com barras laterais que devem permanecer em 250px de largura mesmo quando a área de conteúdo principal as empurra: flex: 0 0 250px em vez de flex-basis: 250px.
• Flex-basis percentual é relativo ao contêiner.flex-basis: 50% significa «50% do tamanho do eixo principal do contêiner flex». Isto funciona para layouts típicos mas interage de forma estranha com flex-wrap: se o contêiner em si tem um tamanho de eixo principal baseado em porcentagem em um contexto flex aninhado, a matemática compõe. Em caso de dúvida, use valores em pixels ou min()/max()/clamp() para flex-basis em vez de porcentagens.
• O Flexbox do IE 11 tem casos extremos com bugs.Internet Explorer 11 (aposentado em junho de 2022) implementou Flexbox com vários bugs: min-height não respeitado, contêineres flex aninhados quebrados, flex: 1 às vezes tratando flex-basis como 0px em vez de 0%, a abreviação «flex de dois valores» tratada inconsistentemente. Para projetos que não suportam mais o IE, ignore. Para software empresarial legado, teste exaustivamente ou use abordagens de layout alternativas.

Privacidade: tudo roda em seu navegador

Ferramentas de aprendizado e layout CSS vêm em dois sabores: páginas HTML simples rodando JavaScript do lado do cliente (privadas, rápidas, sem configuração) e editores em nuvem com projetos salvos (colaborativos mas com compromissos de privacidade). Esta ferramenta é do primeiro tipo. Suas seleções de propriedade, suas configurações de itens, seu CSS gerado: tudo permanece em sua sessão do navegador. Atualize a página e o estado se vai a menos que você tenha copiado o CSS primeiro.

Os riscos de privacidade são baixos aqui porque as configurações do Flexbox raramente contêm informações sensíveis. Ainda assim, a falta de analytics importa: você pode experimentar livremente sem que seu processo de tentativa-e-erro seja registrado. Particularmente útil em ambientes de sala de aula ou treinamento corporativo onde fazer estudantes ou treinandos registrarem contas em plataformas de terceiros é um ponto de atrito. A ferramenta é uma única página estática sem backend, utilizável em qualquer navegador, incluindo máquinas empresariais bloqueadas.

Quando outra ferramenta é a escolha certa

• CSS Grid para layouts bidimensionais.Flexbox é unidimensional; se você precisa alinhar itens tanto em linhas quanto em colunas simultaneamente (por exemplo, um layout estilo revista com cartões de tamanho misto), CSS Grid é dramaticamente mais adequado. Use nosso CSS Grid Generator para esse tipo de trabalho. Os dois funcionam muito bem juntos: Grid para estrutura em nível de página, Flexbox para arranjos internos de componentes.
• Tabelas HTML para dados tabulares.Se seus dados são realmente uma tabela (linhas representando registros, colunas representando campos), use um elemento <table> real com <tr> e <td>. As tabelas fornecem significado semântico para leitores de tela, cabeçalhos ordenáveis e alinhamento integrado. Flexbox/Grid para tabelas é um antipadrão da era 2010; as diretrizes modernas de acessibilidade recomendam explicitamente tabelas HTML semânticas para dados tabulares.
• position: absolute para overlays e tooltips.Overlays modais, tooltips, menus suspensos e elementos UI flutuantes similares funcionam melhor com position: absolute ou position: fixed em vez de Flexbox. Flex/Grid gerenciam fluxo de layout; o posicionamento absoluto tira elementos do fluxo completamente. Combine-os: Flexbox para o layout principal da página, posicionamento absoluto para o modal que a sobrepõe.
• CSS Subgrid para alinhamento aninhado.Quando layouts aninhados precisam se alinhar com a grade do pai (por exemplo, títulos de cartões todos alinhando-se em uma grade de cartões), CSS Subgrid (Firefox 71 2019, Chrome 117 2023, Safari 16 2022) é mais apropriado que Flexbox aninhado. Subgrid permite que filhos herdem trilhas de grade do pai, garantindo alinhamento perfeito através de estruturas aninhadas. Vale a pena aprender para trabalho de componentes de sistemas de design.

Mais perguntas frequentes

O que a abreviação flex significa exatamente?

A abreviação flex define três propriedades de uma vez: flex: <grow> <shrink> <basis>. Valores comuns: flex: 1 (1, 1, 0%) para itens de distribuição igual, flex: 0 0 auto para itens de tamanho fixo, flex: 1 1 250px para itens que crescem/encolhem a partir de um ponto inicial de 250px. A abreviação tem valores iniciais especiais quando apenas um ou dois valores são fornecidos; a forma explícita de três valores evita surpresas.

Como faço os itens quebrarem para múltiplas linhas?

Defina flex-wrap: wrap no contêiner. Os itens transbordam para uma nova linha quando não cabem. Combine com flex-basis nos itens para controlar quantos cabem por linha: flex: 1 1 200px cria uma grade responsiva onde os itens são pelo menos 200px, crescem para preencher o espaço restante e quebram para novas linhas em telas estreitas. A propriedade gap do contêiner lida com o espaçamento entre linhas e itens quebrados.

Posso reverter a ordem dos itens flex?

Sim, várias maneiras. Nível de contêiner: flex-direction: row-reverse (ou column-reverse) inverte todos os itens em ordem. Nível de item: a propriedade order atribui pesos numéricos; itens com números menores aparecem primeiro. A ordem padrão é 0; definir order: -1 em um item o move para a frente. Nota de acessibilidade: a reordenação visual não afeta a ordem de tabulação nem a ordem de leitura do leitor de tela, o que pode confundir usuários de teclado e tecnologia assistiva. Use com moderação.

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

align-items alinha itens dentro de sua linha (ou coluna) ao longo do eixo transversal. align-content alinha as linhas (ou colunas) em si dentro do contêiner, apenas significativo quando há múltiplas linhas quebradas. Se flex-wrap está definido como nowrap (o padrão), align-content não tem efeito porque há apenas uma linha. Use align-items para alinhamento de linha única, align-content para alinhamento multi-linha.

Como centralizo um único elemento com Flexbox?

A resposta clássica: display: flex; justify-content: center; align-items: center; no contêiner pai. Isto centraliza o filho tanto horizontalmente quanto verticalmente. Apenas horizontal: usar somente justify-content: center. Apenas vertical: usar somente align-items: center. Se você precisa centralizar dentro de um pai de altura desconhecida, adicione min-height: 100vh ao pai para que ele tenha espaço vertical para centralizar. O padrão inteiro substitui 20 anos de soluções alternativas de centralização CSS.

Por que meu truncamento de texto não funciona em um contêiner flex?

Por causa do padrão min-width: auto nos itens flex. Text-overflow: ellipsis requer que o elemento realmente transborde seu contêiner; com a largura mínima padrão definida para o tamanho intrínseco do conteúdo, o elemento nunca transborda. Correção: adicione min-width: 0 ao item flex contendo o texto a ser truncado. Este é o bug do Flexbox mais comum nas respostas do Stack Overflow: pesquisar «flex text-overflow ellipsis not working» retorna milhares de versões desta resposta exata.