⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Gerador CSS Flexbox

Crie visualmente um layout CSS flexbox: flex-direction, justify-content, align-items, flex-wrap e gap no contêiner, além de flex-grow, flex-shrink e flex-basis por filho, tudo com visualização ao vivo e CSS copiável.

Processando... 0%

Resultado

Um layout flexbox tem dois livros de regras separados - propriedades no contêiner (direção flexível, justificar conteúdo, alinhar itens, envoltório flexível, lacuna) e propriedades em cada filho (crescimento flexível, encolhimento flexível, base flexível) - e misturá-los é a fonte mais comum de bugs do tipo "por que isso não está centralizando/crescendo/embrulhando da maneira que eu espero". Este gerador coloca os dois livros de regras na tela ao mesmo tempo: altere qualquer controle de contêiner ou os próprios campos de qualquer filho e três caixas numeradas e codificadas por cores são atualizadas imediatamente, para que causa e efeito permaneçam visíveis.

O lado do contêiner cobre todos os eixos do layout: escolha uma direção, escolha como os filhos serão distribuídos ao longo do eixo principal com conteúdo justificado, alinhe-os no eixo cruzado, decida se eles serão agrupados em novas linhas e defina uma lacuna em vez de margens entre eles. O lado filho é igualmente real: adicione caixas até oito, remova até duas e dê a qualquer uma delas seu próprio flex-grow, flex-shrink e flex-basis - o gerador só imprime uma regra CSS por filho quando pelo menos uma delas difere do padrão do navegador, então o código copiado nunca se preenche com flex-grow: 0 em caixas que não precisam dele.

As páginas predefinidas vão direto para os layouts que as pessoas realmente procuram por nome: como centralizar um div (a questão de layout CSS mais perguntada, resolvida com justificar-content e alinhar-itens ambos definidos como centralizados), um logo-left links-right navbar, colunas flexíveis de largura igual via flex-grow e uma comparação lado a lado do espaço entre com seus parentes próximos espaço ao redor e espaço uniformemente.

Como todas as ferramentas deste site, o gerador é gratuito e funciona inteiramente no seu navegador: sem upload, sem conta e continua funcionando offline após o carregamento da página.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Controles de contêiner: direção flexível, justificar conteúdo, alinhar itens, flex-wrap e uma entrada de lacuna em pixels, aplicados ao vivo na visualização.
  • Três caixas secundárias codificadas por cores por padrão (somar até oito, remover até duas), cada uma com seus próprios campos flex-grow, flex-shrink e flex-basis.
  • Bloco CSS copiável com uma regra .flex-container mais uma regra .flex-item-N por filho que possui propriedades flexíveis não padrão.

Principais benefícios

✓ Cada controle de contêiner e cada flex-grow, flex-shrink e flex-basis de cada filho atualizam três caixas de visualização numeradas ao vivo, para que você veja exatamente o que suas regras de flexbox fazem antes de tocar em uma folha de estilo.
✓ O gerador imprime apenas regras filhas que realmente diferem dos padrões CSS, de modo que o código copiado permanece curto e legível em vez de reafirmar flex-grow: 0 em cada caixa.
✓ As páginas predefinidas resolvem os layouts que as pessoas procuram por nome: centralizar um div, uma barra de navegação logotipo-esquerda-links-direita e colunas flexíveis de largura igual - abra uma e a ferramenta já estará configurada.

Casos de uso

  • • Obtenha o CSS exato para centralizar um div tanto horizontal quanto verticalmente, observando o trabalho de justificar o conteúdo e alinhar os itens nas caixas de visualização ao vivo.
  • • Crie um layout de barra de navegação logo à esquerda e links à direita com space-between e align-items: center e, em seguida, copie o CSS do contêiner diretamente em seu componente de cabeçalho.
  • • Compare o espaço entre, o espaço ao redor e o espaço uniformemente lado a lado nas mesmas três caixas, em vez de adivinhar qual delas corresponde ao espaçamento desejado.