Propriedade justify-content: Alinhando itens no eixo principal

Aprenda a distribuir o espaço entre e ao redor dos itens no eixo principal.

A propriedade justify-content é uma das mais utilizadas no Flexbox. Ela é aplicada ao Contêiner Flex e controla como os Itens Flex são alinhados e como o espaço extra é distribuído ao longo do eixo principal do contêiner.

Lembre-se que o eixo principal é definido pela propriedade flex-direction.

  • Se flex-direction: row; (padrão), o eixo principal é horizontal.
  • Se flex-direction: column;, o eixo principal é vertical.

Pense no justify-content como o "organizador de fila" que decide como as pessoas (flex-items) devem se posicionar na fila (main axis). Ele pode fazer com que todos fiquem no início, no fim, no centro, ou distribuir o espaço entre eles de várias maneiras.

Valores da Propriedade justify-content

A propriedade justify-content aceita os seguintes valores:

  1. flex-start (padrão):

    • Os itens são agrupados no início do eixo principal.
    • Se flex-direction: row;, os itens ficam à esquerda.
    • Se flex-direction: column;, os itens ficam no topo.

  2. flex-end:

    • Os itens são agrupados no fim do eixo principal.
    • Se flex-direction: row;, os itens ficam à direita.
    • Se flex-direction: column;, os itens ficam na parte inferior.

  3. center:

    • Os itens são agrupados no centro do eixo principal.

  4. space-between:

    • Os itens são distribuídos uniformemente ao longo do eixo principal. O primeiro item fica no início e o último item fica no fim. O espaço restante é distribuído igualmente entre os itens.

  5. space-around:

    • Os itens são distribuídos uniformemente ao longo do eixo principal, com espaço igual ao redor de cada item. Isso significa que o espaço antes do primeiro item e depois do último item é metade do espaço entre os itens.

  6. space-evenly:

    • Os itens são distribuídos uniformemente ao longo do eixo principal, com espaço igual entre os itens e nas extremidades. O espaço antes do primeiro item, entre os itens e depois do último item é exatamente o mesmo.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Justify-content</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .flex-container {
      display: flex;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      min-height: 100px; /* Altura mínima para visualização */
      margin-bottom: 20px;
      width: 100%; /* Para ver a distribuição do espaço */
    }

    .flex-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      margin: 5px;
      color: #333;
      font-weight: bold;
      text-align: center;
      width: 80px; /* Largura fixa para os itens */
      height: 60px; /* Altura fixa para os itens */
      line-height: 60px; /* Para centralizar texto verticalmente */
    }

    /* --- Exemplos de justify-content --- */

    .container-start {
      justify-content: flex-start; /* Padrão */
    }

    .container-end {
      justify-content: flex-end;
    }

    .container-center {
      justify-content: center;
    }

    .container-space-between {
      justify-content: space-between;
    }

    .container-space-around {
      justify-content: space-around;
    }

    .container-space-evenly {
      justify-content: space-evenly;
    }

    /* Exemplo com flex-direction: column */
    .container-column {
      flex-direction: column;
      height: 300px; /* Necessário para ver a distribuição vertical */
      justify-content: space-between; /* Exemplo de justify-content em coluna */
    }
  </style>
</head>
<body>
  <h1>Propriedade `justify-content`</h1>

  <h2>`justify-content: flex-start` (Padrão)</h2>
  <div class="flex-container container-start">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens agrupados no início do eixo principal (esquerda).</p>

  <h2>`justify-content: flex-end`</h2>
  <div class="flex-container container-end">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens agrupados no fim do eixo principal (direita).</p>

  <h2>`justify-content: center`</h2>
  <div class="flex-container container-center">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens agrupados no centro do eixo principal.</p>

  <h2>`justify-content: space-between`</h2>
  <div class="flex-container container-space-between">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens distribuídos uniformemente, com o primeiro no início e o último no fim.</p>

  <h2>`justify-content: space-around`</h2>
  <div class="flex-container container-space-around">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens distribuídos uniformemente, com espaço igual ao redor de cada item.</p>

  <h2>`justify-content: space-evenly`</h2>
  <div class="flex-container container-space-evenly">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens distribuídos uniformemente, com espaço igual entre os itens e nas extremidades.</p>

  <h2>`justify-content` com `flex-direction: column`</h2>
  <div class="flex-container container-column">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens distribuídos verticalmente com `space-between`.</p>
</body>
</html>

Resultado:

  • Você verá como os itens se alinham e o espaço é distribuído de diferentes maneiras ao longo do eixo principal, tanto na direção row quanto na column.

Boas Práticas:

  • Entenda o Eixo Principal: Sempre tenha claro qual é o eixo principal (row ou column) antes de aplicar justify-content, pois ele afetará a direção do alinhamento.
  • Escolha o Alinhamento Certo: Cada valor de justify-content tem um propósito específico. center para centralizar, space-between para distribuir itens de ponta a ponta, space-evenly para espaçamento totalmente uniforme.
  • Espaço Extra: justify-content só terá efeito se houver espaço extra no contêiner ao longo do eixo principal. Se os itens ocuparem todo o espaço, não haverá nada para distribuir.

Dominar justify-content é essencial para controlar o espaçamento e o alinhamento horizontal (ou vertical, se flex-direction: column;) dos seus Itens Flex, criando layouts bem organizados e visualmente agradáveis.