CSS Academy · Aula

Justify-Content e Align-Items

Distribua itens ao longo dos eixos principal e transversal usando justify-content e align-items.

Justify-Content e Align-Items é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Duas propriedades de alinhamento essenciais

As duas propriedades de alinhamento flexível mais usadas são:

justify-content — alinha os itens ao longo do eixo principal
align-items — alinha os itens ao longo do eixo transversal

justify-content: flex-start

flex-start (padrão) agrupa os itens em direção ao início do eixo principal. Na direção row, os itens são alinhados à esquerda.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

Centraliza os itens ao longo do eixo principal. É a técnica clássica de centralização horizontal com Flexbox.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

Agrupa os itens em direção ao final do eixo principal (o lado direito na direção row).

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

Distribui os itens com espaços iguais entre eles. O primeiro item fica no início, e o último fica no final — sem espaço nas bordas.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

Coloca espaços iguais ao redor de cada item. Os itens das bordas recebem metade do espaço dos intervalos internos. Visualmente, as bordas têm metade do preenchimento existente entre os itens.

justify-content: space-evenly

Todos os intervalos, incluindo os das bordas, são iguais. Diferentemente de space-around, o preenchimento das bordas é igual aos intervalos entre os itens.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (Padrão)

stretch (padrão) faz com que todos os itens flexíveis preencham o tamanho transversal do contêiner. Em um contêiner em linha, todos os itens passam a ter a mesma altura.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

Centraliza os itens no eixo transversal. Em um contêiner em linha, isso centraliza os itens verticalmente. É a solução clássica para centralização vertical.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start e flex-end

flex-start alinha os itens à borda inicial do eixo transversal (a parte superior em uma linha). flex-end alinha os itens à borda final do eixo transversal (a parte inferior em uma linha).

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

Alinha os itens para que suas linhas de base de texto coincidam. É útil quando os itens têm tamanhos de fonte diferentes, mas devem parecer visualmente alinhados.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

Verificação rápida

Qual combinação centraliza perfeitamente um item flexível na horizontal e na vertical dentro do contêiner?

Recapitulação

justify-content distribui os itens ao longo do eixo principal com valores como flex-start, center e space-between. align-items posiciona os itens no eixo transversal com stretch, center e flex-start. Juntas, essas propriedades controlam o alinhamento nos dois eixos.

Perguntas Frequentes

A aula “Justify-Content e Align-Items” é grátis?

Sim — o texto completo de “Justify-Content e Align-Items” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Justify-Content e Align-Items”?

Distribua itens ao longo dos eixos principal e transversal usando justify-content e align-items. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Justify-Content e Align-Items”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para CSS Academy