Distribuição
Além de alinhar, o Flexbox também distribui o espaço sobrando entre os itens, sem você calcular margem nenhuma na mão.
Estudar esta lição interativa →Enquanto align-items resolve o alinhamento no eixo perpendicular (geralmente vertical), justify-content resolve a distribuição no eixo principal (geralmente horizontal): onde os itens ficam posicionados quando existe espaço sobrando no contêiner.
flex-start
Os itens ficam colados no início do eixo (o padrão).
center
Os itens ficam agrupados no centro, com espaço sobrando igual dos dois lados.
space-between
O primeiro item cola no início, o último cola no fim, e o espaço sobrando se distribui igualmente ENTRE eles.
space-around
Cada item recebe uma faixa de espaço igual ao redor de si, inclusive nas pontas. Por isso o espaço entre dois itens vizinhos é o dobro do espaço nas pontas.
space-evenly
O espaço sobrando é dividido em partes idênticas: entre os itens e também nas duas pontas.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. space-between: extremos colados nas bordas, espaço distribuído entre os itens do meio.
Um exemplo de produto real: justify-content: space-between é praticamente a assinatura visual de qualquer cabeçalho de site, o logo numa ponta, o menu (ou botão de login) na outra, com o espaço do meio se ajustando automaticamente ao tamanho da tela, sem margens fixas calculadas na mão.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Troque o valor de justify-content.