Playground de Flexbox CSS
NovoAjuste as propriedades flex com pré-visualização ao vivo e copie o CSS.
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
Um gerador visual de flexbox que escreve o CSS por si
Este gerador de flexbox transforma o CSS Flexible Box Layout em algo que pode ver. Em vez de adivinhar o que justify-content ou align-items vão fazer, activa cada propriedade num controlo rotulado e observa a pré-visualização em directo reorganizar-se instantaneamente — depois copia código limpo e pronto para produção. Corre inteiramente no seu browser, sem registo e sem nada para carregar.
É um verdadeiro playground de flexbox: um contentor flex real com elementos filhos editáveis, controlos completos do contentor e por elemento, contentores aninhados, uma pré-visualização responsiva redimensionável e um URL partilhável. Quer esteja a aprender flexbox ou a construir rapidamente uma barra de navegação, uma linha de cartões ou um herói centrado, pode obter o layout exacto — e o CSS, Tailwind ou Bootstrap correspondente — em segundos.
Cada propriedade do contentor, com pré-visualização em directo
Controle o contentor da forma que a especificação define. Defina flex-direction (row, row-reverse, column, column-reverse) para escolher o eixo principal, justify-content para espaçar itens ao longo dele, e align-items para os alinhar no eixo transversal. Active flex-wrap para que os itens fluam para novas linhas, use align-content para espaçar essas linhas envolvidas, e ajuste valores independentes de gap de linha e coluna.
Uma legenda de eixos integrada mostra qual a direcção do eixo principal e qual é o eixo transversal ao alterar flex-direction, para que a relação entre justify-content e align-items finalmente faça sentido. É uma folha de truques de flexbox prática que aprende fazendo.
Controlo por elemento: grow, shrink, basis, order e align-self
A maioria dos geradores para no contentor. Este permite-lhe clicar em qualquer elemento na pré-visualização e editá-lo individualmente: defina flex-grow, flex-shrink e flex-basis (o atalho flex), substitua o seu align-self e altere a sua order para reposicioná-lo sem tocar no HTML. Adicione ou remova elementos para testar como o espaço se redistribui.
Isso torna simples construir padrões reais — uma barra lateral fixa ao lado de uma coluna principal flexível (flex: 0 0 240px ao lado de flex: 1), um único elemento centrado, ou um link de rodapé empurrado para o extremo com margin-left: auto.
Flexbox aninhado e pré-visualização responsiva
Os layouts reais aninham-se. Qualquer elemento pode tornar-se o seu próprio contentor flex aninhado com a sua própria direcção, justify e align — exactamente o que um gerador de flexbox aninhado precisa para cartões que têm uma linha de cabeçalho acima de um corpo, ou uma barra de ferramentas dentro de outra barra de ferramentas. O código gerado inclui também as regras aninhadas.
Como o flexbox trata do comportamento responsivo, a pré-visualização é redimensionável: arraste o manípulo ou escolha um predefinido de largura Móvel / Tablet / Desktop e observe como os elementos se envolvem e realinham em cada tamanho. É a forma mais rápida de confirmar que um layout flexbox responsivo se comporta correctamente antes de o lançar.
Copie como CSS, Tailwind ou Bootstrap — e como se compara com outras ferramentas
Mude o separador de saída para obter o formato que o seu projecto utiliza. CSS fornece-lhe regras limpas .container e por elemento usando o atalho flex. Tailwind escreve as classes de utilitário — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — num fragmento HTML pronto a colar. Bootstrap gera as classes de utilitário equivalentes d-flex. Apenas as propriedades que efectivamente alterou são emitidas, pelo que a saída se mantém mínima e legível.
Outros geradores visuais como Flexbox.help omitem os controlos por elemento e os contentores aninhados. O playground online do Tailwind não gera CSS vanilla. Esta ferramenta faz os três formatos de saída, trata o aninhamento e funciona offline uma vez carregada — sem conta, sem custo, sem dados a sair do seu browser.
Frequently asked questions
O que é o Flexbox em CSS e para que serve?
O Flexbox (CSS Flexible Box Layout) é um modelo de layout unidimensional para organizar itens numa única linha ou coluna e distribuir espaço entre eles. Activa-se com uma linha — display: flex — no elemento pai, e os seus filhos tornam-se itens flex que pode alinhar, espaçar e redimensionar sem floats ou margens manuais. É utilizado porque facilita tarefas comuns: centrar, colunas de igual altura, barras de navegação e layouts que eram complicados anteriormente.
Como se usa o flexbox?
Adicione display: flex ao elemento contentor, depois controle os filhos com as propriedades do contentor — flex-direction (row ou column), justify-content (espaçamento ao longo do eixo principal), align-items (alinhamento no eixo transversal), flex-wrap e gap. Por exemplo, .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } organiza um logótipo e links numa linha, centrados verticalmente.
Como centro um div com flexbox?
Torne o pai um contentor flex e centre em ambos os eixos: .parent { display: flex; justify-content: center; align-items: center; } — isso coloca o filho exactamente no centro horizontal e verticalmente. Dê ao pai uma altura (por exemplo min-height: 100vh para centramento em ecrã completo). É a forma mais limpa de centrar perfeitamente um elemento.
Qual é a diferença entre justify-content e align-items?
justify-content posiciona itens ao longo do eixo principal, enquanto align-items os posiciona no eixo transversal. Com o flex-direction: row predefinido, justify-content espaça os itens horizontalmente e align-items alinha-os verticalmente. Mude para flex-direction: column e os dois trocam. A legenda de eixos em directo na ferramenta mostra qual é qual ao alterar a direcção.
O que são flex-grow, flex-shrink e flex-basis?
São as três propriedades por elemento que decidem como um item flex se dimensiona, geralmente escritas juntas como o atalho flex. flex-basis é o tamanho inicial antes de partilhar o espaço livre. flex-grow indica com que avidez um item se expande para preencher o espaço restante (0 = não crescer, 1 = tomar uma quota). flex-shrink indica com que facilidade encolhe quando o espaço é limitado.
Como faço os itens flex envolverem?
Defina flex-wrap: wrap no contentor para que os itens que não cabem se movam para uma nova linha em vez de transbordar. Por defeito flex-wrap é nowrap. Com o ajuste activado, dê aos itens um flex-basis (como flex: 1 1 200px) para que cada linha se preencha ordenadamente, e use align-content para espaçar as linhas resultantes.
Este gerador de flexbox é gratuito e privado?
Gratuito sem necessidade de registo. Todo o playground funciona no seu browser — o seu layout, o CSS gerado e o link de partilha são construídos no seu dispositivo e nunca carregados para um servidor. Pode marcar como favorito e usar offline depois de a página ter carregado. Não há conta a criar nem limite nos layouts que pode configurar.
Related tools
Ver todas as ferramentas
Novo Misturador de cores
Misture duas cores em qualquer proporção e copie o resultado ou qualquer passo.
Novo Seletor de cores de imagem
Escolha qualquer cor de uma imagem e extraia a paleta dominante em HEX, RGB e HSL.
Novo Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Novo Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Seletor e conversor de cor
Escolha uma cor e converta-a entre HEX, RGB, HSL e OKLCH.
Novo Verificador de contraste de cor
Verifique os rácios de contraste WCAG AA/AAA entre o texto e a cor de fundo.