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

justificar-conteúdo: espaço entre explicado (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 o conteúdo justificado definido como espaço entre: a primeira caixa fica alinhada com a borda inicial do contêiner, a última caixa fica alinhada com sua borda final e o espaço restante é dividido em espaços iguais entre as caixas no meio - nunca antes da primeira ou depois da última.

Esse é o detalhe que as pessoas confundem. space-around dá a cada caixa uma margem igual em ambos os lados, de modo que os espaços entre as caixas terminam com o dobro da largura dos espaços nas duas bordas externas (cada borda recebe apenas a margem de uma caixa, não duas). space-evenly vai além e faz com que todas as lacunas tenham o mesmo tamanho, incluindo as duas bordas externas - a única das três onde o espaçamento parece perfeitamente uniforme em toda a extensão.

Alterne o menu suspenso justificar conteúdo entre os três valores abaixo e observe as mesmas três caixas serem reorganizadas - é a maneira mais rápida de ver a diferença em vez de memorizá-la. Copie o CSS para aquele que corresponda ao espaçamento que você realmente deseja.

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