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

Colunas Flexbox de largura igual – Gerador CSS

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 o gerador com flex-grow: 1 já definido em todas as três caixas de visualização. Observe-os: em vez de encolher para caber em seu conteúdo, cada caixa reivindica uma parcela idêntica do espaço restante na linha, que é a receita completa para colunas flexíveis de largura igual - sem larguras percentuais, sem calc(), sem matemática de pixels fixos para manter em sincronia.

flex-grow: 1 diz a uma criança para crescer, e configurá-lo para cada criança na linha significa que todos crescem na mesma proporção, então eles acabam com a mesma largura, independentemente de quantos existem ou do conteúdo que está dentro deles. Adicione ou remova uma caixa com os controles abaixo e as colunas restantes serão redistribuídas instantaneamente para permanecerem iguais – redimensione uma janela do navegador sobre esse layout em produção e ela se comportará da mesma maneira.

Este é o padrão por trás de grades de cartões de altura igual, colunas de tabelas de preços e seções de rodapé divididas uniformemente. Dê mais espaço a uma coluna elevando seu crescimento flexível acima das outras ou copie o bloco CSS abaixo exatamente como gerado para uma divisão limpa e igual.

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