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

Gerador de CSS Flexbox

Construa visualmente um layout CSS flexbox: flex-direction, justify-content, align-items, flex-wrap e gap no container, mais flex-grow, flex-shrink e flex-basis por filho, tudo com pré-visualização ao vivo e CSS pronto a copiar.

🔒 Processado inteiramente em seu navegador – nada que você digita aqui é carregado.

A processar... 0%

Resultado

Um layout flexbox tem dois conjuntos de regras separados — propriedades no container (flex-direction, justify-content, align-items, flex-wrap, gap) e propriedades em cada filho (flex-grow, flex-shrink, flex-basis) — e confundi-los é a fonte mais comum de erros do tipo "porque é que isto não está a centrar / a crescer / a fazer wrap como eu esperava". Este gerador coloca ambos os conjuntos de regras no ecrã ao mesmo tempo: altere qualquer controlo do container ou os campos de um filho e três caixas numeradas e com cores diferentes atualizam-se imediatamente, para que a causa e o efeito fiquem visíveis.

O lado do container cobre todos os eixos de layout: escolha uma direção, decida como os filhos são distribuídos ao longo do eixo principal com justify-content, alinhe-os no eixo transversal, defina se fazem wrap para novas linhas, e estabeleça um gap em vez de hacks de margens entre eles. O lado dos filhos é igualmente concreto: adicione caixas até oito, remova até ficarem duas, e atribua a qualquer uma os seus próprios flex-grow, flex-shrink e flex-basis — o gerador só gera uma regra CSS por filho quando pelo menos um destes valores difere do padrão do navegador, para que o código copiado nunca se encha de flex-grow: 0 em caixas que não precisam disso.

As páginas de predefinição saltam diretamente para os layouts que as pessoas realmente procuram pelo nome: como centrar uma div (a pergunta de layout CSS mais feita de sempre, resolvida com justify-content e align-items ambos definidos como center), uma navbar com logótipo à esquerda e links à direita, colunas flexíveis de largura igual via flex-grow, e uma comparação lado a lado do space-between com os seus parentes próximos space-around e space-evenly.

Como todas as ferramentas deste site, o gerador é gratuito e funciona inteiramente no seu navegador: sem carregamentos, sem conta, e continua a funcionar offline depois de a página ser carregada.

Está a gostar desta ferramenta? Acha este produto útil? Vê potencial nele e quer apoiá-lo?

🛡️
Executado no Navegador

Os seus ficheiros e dados nunca saem deste dispositivo. O processamento é totalmente offline. 100% Seguro.

Formatos Aceites e Regras

  • Controlos do container: flex-direction, justify-content, align-items, flex-wrap e um campo para gap em píxeis, aplicados ao vivo na pré-visualização.
  • Três caixas filhas com cores diferentes por predefinição (adicione até oito, remova até ficarem duas), cada uma com os seus campos de flex-grow, flex-shrink e flex-basis.
  • Bloco de CSS pronto a copiar com uma regra .flex-container mais uma regra .flex-item-N por cada filho que tenha propriedades flex não padrão.

Principais Vantagens

✓ Cada controlo do container e cada flex-grow, flex-shrink e flex-basis de cada filho atualizam três caixas de pré-visualização numeradas em tempo real, para perceber exatamente o que as suas regras flexbox fazem antes de mexer numa folha de estilos.
✓ O gerador só gera regras de filho que realmente diferem dos valores padrão do CSS, por isso o código copiado é curto e legível, em vez de repetir flex-grow: 0 em todas as caixas.
✓ As páginas de predefinição resolvem os layouts que as pessoas procuram pelo nome: centrar uma div, uma navbar com logótipo à esquerda e links à direita, e colunas flexíveis de largura igual — abra uma e a ferramenta já está configurada.

Casos de Uso

  • • Obtenha o CSS exato para centralizar uma div tanto horizontal quanto verticalmente vendo justify-content e align-items em ação nas caixas da pré-visualização.
  • • Crie um layout de navbar com logotipo à esquerda e links à direita usando space-between e align-items: center, depois copie o CSS do contêiner diretamente para o seu componente de cabeçalho.
  • • Compare space-between, space-around e space-evenly lado a lado nas mesmas três caixas em vez de adivinhar qual corresponde ao espaçamento que você quer.