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

Barra de navegação CSS Flexbox - logotipo à esquerda, links à direita

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

Esta página abre a predefinição do gerador flexbox para o layout clássico da barra de navegação: justificar-content definido como espaço entre e alinhar itens definido como centralizado. Coloque um logotipo na primeira caixa e uma linha de links de navegação na última (ou divida os links nas caixas do meio) e o contêiner flexbox os empurra para extremidades opostas da barra enquanto mantém todos os itens alinhados no mesmo centro vertical, não importa a altura do logotipo ou do texto do link.

o espaço entre é o que faz isso funcionar: ele fixa o primeiro filho na borda inicial e o último filho na borda final e, em seguida, espalha todos os filhos restantes uniformemente entre eles - exatamente o logotipo esquerdo e os links direitos que quase todos os cabeçalhos do site usam. align-items: center então resolve o alinhamento vertical que costumava precisar de hacks de altura de linha ou truques de exibição de células de tabela.

Ajuste a contagem de filhos para corresponder à sua barra de navegação real - duas caixas para uma barra simples de logotipo e CTA, mais para o logotipo e vários links - e observe a adaptação do layout ao vivo. Copie o bloco CSS assim que ele corresponder ao seu cabeçalho ou abra a predefinição de espaço entre se quiser ver aquela propriedade comparada com seus parentes próximos.

🛡️
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.