Gerador de CSS Flexbox

Ferramenta gratuita para experimentar layouts Flexbox ajustando flex-direction, justify-content, align-items, flex-wrap e gap com pré-visualização em tempo real. Copie o código CSS gerado com um clique.

Última atualização: 2026-09-20

Construir uma disposição Flexbox à mão

Flexbox é o método de disposição que ordena os elementos ao longo de um só eixo. Esta ferramenta permite trocar `flex-direction`, `justify-content`, `align-items`, `flex-wrap` e `gap` na tela, ver o resultado na hora e copiar o CSS pronto diretamente.

**Quase toda dificuldade com Flexbox se reduz a para onde atuam `justify-content` e `align-items`.** O primeiro governa a colocação ao longo do **eixo principal** e o segundo ao longo do **eixo transversal**. O que torna a coisa incômoda é que **no momento em que você troca `flex-direction` de `row` para `column`, esses dois eixos se invertem.** O `justify-content` que cuidava do horizontal enquanto os elementos ficavam lado a lado passa a cuidar do vertical assim que ficam empilhados. A maioria das queixas de que algo "não centraliza" equivale a **não ter notado que a propriedade a mudar se inverteu.**

Como se usa

Comece por um ajuste predefinido Disposições habituais como centralizar, separar e empilhar estão à mão.
Troque flex-direction **Mover-se entre `row` e `column` torna visível a inversão dos eixos.**
Experimente as propriedades de alinhamento Troque `justify-content` e `align-items` por vez e confirme como cada um se comporta.
Copie o CSS gerado Assim que a disposição lhe satisfizer, pode ser colada diretamente no seu código.

Dicas para aproveitar melhor

justify-content alinha os itens ao longo do "eixo principal", enquanto align-items os alinha no "eixo transversal". Ao mudar flex-direction para column, o eixo principal passa a ser vertical, então o efeito visual dessas duas propriedades se inverte.
O preset "Centralizado" combina justify-content: center com align-items: center, a forma mais comum de centralizar um elemento tanto na horizontal quanto na vertical com Flexbox.
A propriedade gap adiciona espaço apenas entre os itens, não ao redor do contêiner, então, diferente do margin, cria um espaçamento uniforme entre itens vizinhos sem afetar as bordas.
Definir align-self em um único item substitui o align-items do contêiner apenas para esse item, útil quando você quer destacar um elemento com um alinhamento diferente dos demais.
Ativar flex-wrap: wrap permite que itens que não cabem mais na largura do contêiner (ou na altura, no modo coluna) passem automaticamente para a próxima linha, uma técnica comum em layouts de cartões responsivos.

Quando é útil

Montar uma barra de navegação

**Pôr o logotipo à esquerda e o menu à direita é o caso clássico de `justify-content: space-between`.**

Espaçar cartões por igual

Usar `gap` lhe poupa o artifício de anular `margin` em nome de um espaçamento parelho.

Centralizar um elemento nas duas direções

**Pôr tanto `justify-content` quanto `align-items` em `center` é o caminho mais curto.**

Aprender Flexbox

Trocar um valor e observar o resultado ensina mais rápido do que qualquer leitura.

Termos de Flexbox

Eixo principal: A direção ao longo da qual os elementos se dispõem, fixada por `flex-direction`. **Corre na horizontal com `row` e na vertical com `column`.**
Eixo transversal: A direção perpendicular ao eixo principal. **Quando o principal se inverte, este se inverte com ele.**
Justify-content: Governa a colocação **ao longo do eixo principal**, oferecendo centralização, separação, distribuição parelha e o mais.
Align-items: Governa a colocação **ao longo do eixo transversal**. Sob o `stretch` padrão, os filhos crescem até a altura completa.
Flex-wrap: Decide se os elementos que não cabem passam a uma linha nova. Deixado em `nowrap`, são apertados no lugar.
Gap: O espaço deixado entre elementos. **Ao contrário de `margin`, não acrescenta espaço sobrando nas bordas externas.**

Perguntas frequentes

justify-content controla o alinhamento ao longo do "eixo principal" do Flexbox (a direção definida por flex-direction, horizontal por padrão), enquanto align-items controla o alinhamento no "eixo transversal" perpendicular. Com flex-direction: row, o eixo principal é horizontal, então justify-content cuida do posicionamento horizontal e align-items do vertical; mas ao mudar para flex-direction: column, o eixo principal passa a ser vertical, e essas duas propriedades trocam de papel.

Quando flex-direction é column, o eixo principal passa a ser vertical, então justify-content: center centraliza os itens verticalmente. Para centralizá-los também na horizontal (o eixo transversal), use align-items: center. Combinando os dois, é possível centralizar o conteúdo nas duas direções mesmo em um layout empilhado em coluna.

O suporte a gap no Flexbox demorou a chegar ao Chrome e ao Safari, até por volta de 2021, mas hoje é compatível com todos os principais navegadores (Chrome 84+, Safari 14.1+, Firefox 63+). Se precisar dar suporte a navegadores muito antigos, considere usar margin como alternativa.

flex-grow determina o quanto um item se expande para preencher o espaço sobrando quando o contêiner tem espaço extra, enquanto flex-shrink determina o quanto um item encolhe quando o contêiner é estreito demais para acomodar todos os itens em seu tamanho original. Ambas as propriedades distribuem o excedente ou a falta de espaço com base no tamanho de referência do item (flex-basis).

Em geral, o Flexbox funciona melhor para organizar itens em uma única direção (uma linha ou uma coluna), como uma barra de navegação ou uma fileira de cartões. Já o CSS Grid foi projetado para controlar linhas e colunas simultaneamente em um layout verdadeiramente bidimensional, como a grade de uma página inteira. Como regra geral, use Flexbox para arranjos lineares simples e Grid para estruturas mais complexas em formato de grade.

Curiosidade — Como o Flexbox mudou a história do layout em CSS

Antes do surgimento do CSS Flexbox (formalmente CSS Flexible Box Layout Module), os layouts horizontais na web geralmente eram construídos com a propriedade float. Porém, o float foi originalmente projetado para fazer o texto contornar uma imagem, não para criar layouts, então usá-lo com esse propósito exigia muitas soluções alternativas, sendo a mais famosa o truque "clearfix" para evitar que a altura do elemento pai colapsasse.

O Flexbox, cujo primeiro rascunho foi publicado pelo W3C em 2009, foi projetado especificamente para layouts unidimensionais. Tarefas que antes exigiam várias linhas de truques CSS com float — esticar elementos ao longo do eixo principal, distribuir espaço uniformemente ou centralizar conteúdo verticalmente — passaram a ser expressas com uma única propriedade declarativa, como justify-content ou align-items.

Quando os principais navegadores concluíram a implementação do Flexbox por volta de 2015, ele rapidamente se tornou a forma padrão de criar padrões comuns de design web, como barras de navegação, layouts de cartões e alinhamento de formulários. Na época, a comunidade de desenvolvedores front-end recebeu com entusiasmo especial o fato de a centralização vertical, há muito considerada um dos problemas mais difíceis do CSS, finalmente ter uma solução simples.

Hoje, o Flexbox coexiste com o CSS Grid, especializado em layouts bidimensionais, cada um cumprindo um papel diferente: o Flexbox para organizar componentes ao longo de uma única direção, e o Grid para estruturar a página inteira como uma grade.

Ver todas as curiosidades