Como usar: Gerador de Flexbox CSS
- Escolha uma predefinição — centralizar, navbar, cards com quebra, sidebar, pilha — ou comece do zero.
- Configure o container: flex-direction, flex-wrap, justify-content (eixo principal), align-items (eixo transversal) e gap.
- Clique em um item para ajustar seu flex-grow, shrink, basis, order e align-self; use + Adicionar item ou Remover para mudar a quantidade de itens.
- Redimensione o container para testar e depois copie o CSS, o HTML ou as classes do Tailwind.
Os dois eixos do flexbox
O flexbox organiza os itens ao longo de um eixo principal (definido por flex-direction) e de um eixo transversal perpendicular a ele. O justify-content distribui os itens no eixo principal; o align-items os alinha no eixo transversal. Ao mudar para column, os dois trocam de função — por isso “centralizar verticalmente” às vezes exige justify-content e outras vezes align-items.
flex: grow shrink basis
| Atalho | Equivale a | Use para |
|---|---|---|
flex: 1 | 1 1 0% | Colunas de mesma largura que dividem o espaço |
flex: auto | 1 1 auto | Crescer a partir do tamanho do próprio conteúdo |
flex: none | 0 0 auto | Itens fixos, como logo ou ícone |
flex: 1 1 240px | Começa em 240px e depois cresce ou encolhe | Grades de cards com quebra de linha |
O margin-left: auto em um item o empurra — junto com tudo que vem depois dele — para a extremidade final, o jeito clássico de alinhar à direita um botão “Entrar” em uma navbar. Para layouts bidimensionais, com linhas e colunas, o Gerador de CSS Grid é a melhor escolha.
Também pesquisado como: gerador de flexbox, gerador css flexbox, playground flexbox, criador de flexbox online, justify-content css, align-items css, gerador de layout flex, gerador flex tailwind.
Ferramentas que combinam com: Gerador de Flexbox CSS
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
- Conversor CSS para Tailwind — Cole regras ou declarações CSS e receba as classes utilitárias do Tailwind equivalentes para cada seletor — incluindo estados hover: e valores arbitrários como p-[13px].
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
Perguntas frequentes
Como centralizar uma div com flexbox?
No elemento pai: display: flex; justify-content: center; align-items: center; e defina uma altura. Escolha a predefinição “Centralizar qualquer coisa” para ver na prática.
Qual a diferença entre justify-content e align-items?
O justify-content posiciona os itens no eixo principal (horizontal em uma linha), e o align-items no eixo transversal (vertical em uma linha). Com flex-direction: column, eles trocam de função.
Por que meus itens flex não quebram de linha?
O flex-wrap vem por padrão como nowrap, então os itens encolhem para caber em uma única linha. Defina flex-wrap: wrap e dê aos itens um flex-basis ou min-width para que eles tenham um tamanho em que possam quebrar.
Flexbox ou grid?
Flexbox para uma direção por vez — navbars, barras de ferramentas, centralização, linhas de cards. Grid quando você precisa de linhas e colunas alinhadas, como em layouts de página e dashboards.
Posso instalar o Gerador de Flexbox CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Flexbox CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.