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.
Dicas
- 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.
Perguntas frequentes
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.