Distribua espaço no eixo principal com justify-content

Depois de escolher a direção, você precisa decidir o que fazer com o espaço que sobra. Nesta aula, a barra da livraria ganhará distribuição previsível sem margin-left: 230px nem espaços digitados no HTML.

justify-content é a propriedade que alinha e distribui itens ao longo do eixo principal. Imagine três pessoas esperando num banco comprido. Depois que cada uma ocupa seu lugar, ainda sobra banco; você pode reunir o grupo no começo, no centro, no fim ou distribuir o espaço. O mapeamento é direto: container é o banco, itens são as pessoas e espaço livre é o trecho desocupado. O limite é que itens flexíveis podem crescer ou encolher antes dessa etapa. Se eles ocuparem todo o eixo, não haverá espaço livre para distribuir.

Compare posições com o mesmo conteúdo

Comece com um container mais largo que seus itens:

.barra {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

flex-start reúne os itens no início do eixo; center centraliza o grupo; e flex-end leva o grupo ao final. “Início” e “final” acompanham a direção e o modo de escrita. São nomes mais seguros que imaginar esquerda e direita.

Os valores com space distribuem a sobra:

.barra {
  display: flex;
  justify-content: space-between;
}

space-between não deixa espaço nas extremidades e divide a sobra entre os itens. space-around dá uma parcela a cada lado de cada item, então o intervalo do meio fica maior que o das bordas. space-evenly cria intervalos iguais, inclusive nas extremidades. Teste os três com a mesma largura; trocar também o tamanho do container esconderia a regra que você quer observar.

Não use distribuição como substituto de gap. Gap estabelece um intervalo mínimo e previsível entre vizinhos; justify-content decide o destino da sobra. As duas propriedades podem trabalhar juntas. Com apenas um item, valores space-between não criam um intervalo, porque não existe um segundo vizinho entre o qual repartir espaço.

Empurre somente o item que precisa sair do grupo

Uma barra comum tem marca e links juntos, mas login separado no final. Nesse caso, distribuir todos os intervalos pode ser exagero. Uma margem automática absorve o espaço disponível antes do item:

.barra {
  display: flex;
  gap: 1rem;
}

.entrar {
  margin-inline-start: auto;
}

O nome lógico margin-inline-start respeita a direção de escrita melhor que margin-left. O resultado técnico é específico: a margem cresce e consome a sobra, empurrando .entrar para o final. Os demais links continuam separados apenas por gap.

Quando parece que a propriedade não funciona

O erro mais comum é testar justify-content num container sem sobra. Se todos os itens têm flex: 1, juntos eles preenchem o eixo; centralizar espaço zero não muda nada. Outro erro é olhar o eixo errado depois de usar flex-direction: column. Nesse caso, justify-content passa a agir no sentido vertical, e você precisa de altura disponível para notar o deslocamento.

No laboratório, primeiro anote onde cada valor deve colocar os links. Depois execute e compare. Por fim, remova justify-content e separe apenas “Entrar” com margem automática. A missão termina quando sua barra funciona em row e column sem trocar uma margem numérica. Explique qual espaço foi distribuído em cada direção; essa explicação é a prova de que você controlou o eixo, não apenas encontrou uma combinação bonita.