Qual é a diferença entre justify-content e align-items?

justify-content posiciona os itens ao longo do eixo principal (a direção definida por flex-direction), enquanto align-items os posiciona no eixo cruzado perpendicular.

O que é o eixo principal?

É a direção principal em que os itens fluem. Com flex-direction: row é horizontal; com column é vertical.

Quando flex-wrap importa?

Apenas quando os itens juntos são mais largos (ou altos) do que o contêiner. Com wrap, os itens extras vão para uma nova linha em vez de encolher ou transbordar.

gap adiciona espaçamento uniforme entre os itens flex sem precisar de margens, mantendo o layout limpo.

Algo é enviado a um servidor?

Não. O laboratório funciona inteiramente no seu navegador e nada é enviado.

Laboratório de Flexbox

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

Itens: 4

Pré-visualização

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Sites externos relacionados

Alguns links são links de afiliados.

AmazonO maior marketplace online do mundo para compras, eletrônicos, livros, software e mais. Envio rápido, devoluções fáceis e um vasto catálogo de produtos o tornam o favorito para compras do dia a dia. A assinatura Prime adiciona streaming, frete grátis e ofertas exclusivas.UdemyUm marketplace de aprendizado online com mais de 250.000 cursos em programação, design, negócios e mais. Os cursos são ministrados por especialistas do setor e disponíveis no seu próprio ritmo. Vendas frequentes o tornam uma das maneiras mais acessíveis de aprender novas habilidades.

Ferramentas relacionadas

Gerador de CSS clamp()Transforme tamanho mínimo e máximo e faixa de viewport em um valor CSS clamp() fluido para tipografia e espaçamento responsivos, com pré-visualização. No navegador.Formatador JSONFormate, compacte e valide JSON online gratuitamente. JSON com erro? Mostra exatamente a linha e coluna do erro com destaque. Nada é enviado.Base64 Codificar / DecodificarCodifique texto para Base64 ou decodifique Base64 na hora — acentos e emojis sem erros (UTF-8), Base64 seguro para URL, imagem para data URL. Tudo no navegador.Testador de RegexTeste expressões regulares com destaque de correspondências ao vivo, grupos de captura, flags e prévia de substituição. Tudo no navegador, sem enviar nada.

Experimente o CSS Flexbox de forma visual. Alterne flex-direction, justify-content, align-items, flex-wrap e gap e veja a pré-visualização ao vivo ser atualizada, depois copie o CSS gerado. É a maneira mais rápida de entender como as propriedades flex interagem ou de ajustar um layout. Tudo funciona no seu navegador.

Como usar

Alterne as propriedades flex usando os botões.
Veja os elementos se reorganizarem em tempo real.
Ajuste o número de itens e copie o CSS para o seu projeto.

Eixo principal e eixo cruzado

Um contêiner flex dispõe os itens ao longo de um eixo principal definido por flex-direction (linha ou coluna). justify-content posiciona os itens ao longo desse eixo principal, enquanto align-items os posiciona no eixo cruzado (perpendicular a ele). flex-wrap decide se os itens passam para novas linhas, e gap adiciona espaçamento uniforme entre eles.

Recursos

Todas as propriedades principais

Controle direction, justify-content, align-items, wrap e gap.

Pré-visualização ao vivo

Veja os itens se reorganizarem instantaneamente ao alterar cada propriedade.

Número de itens ajustável

Mude o número de caixas para ver como os layouts respondem.

Copiar o CSS

Obtenha uma regra CSS pronta para usar no seu contêiner.

Quando usar

Prototipagem

Encontre rapidamente as configurações flex certas para um layout antes de codificá-lo.

Aprender Flexbox

Desenvolva intuição sobre como justify e align se comportam juntos.

Corrigir alinhamento

Teste combinações para centralizar ou distribuir itens corretamente.

Ensino

Demonstre o comportamento do Flexbox ao vivo para alunos ou colegas de equipe.

Observações

O eixo principal segue flex-direction (row ou column).
justify-content age no eixo principal; align-items no eixo cruzado.
O ajuste de linha só importa quando os itens excedem a largura do contêiner.
Tudo funciona no seu dispositivo; nada é enviado ao servidor.

Perguntas frequentes

Qual é a diferença entre justify-content e align-items?: justify-content posiciona os itens ao longo do eixo principal (a direção definida por flex-direction), enquanto align-items os posiciona no eixo cruzado perpendicular.
O que é o eixo principal?: É a direção principal em que os itens fluem. Com flex-direction: row é horizontal; com column é vertical.
Quando flex-wrap importa?: Apenas quando os itens juntos são mais largos (ou altos) do que o contêiner. Com wrap, os itens extras vão para uma nova linha em vez de encolher ou transbordar.
O que gap faz?: gap adiciona espaçamento uniforme entre os itens flex sem precisar de margens, mantendo o layout limpo.
Algo é enviado a um servidor?: Não. O laboratório funciona inteiramente no seu navegador e nada é enviado.