Propriedade order: Mudando a ordem visual dos itens

No fluxo normal do documento HTML, a ordem em que os elementos aparecem no código é a ordem em que eles são exibidos na tela. No entanto, com o Flexbox, você tem a flexibilidade de alterar essa ordem visual sem precisar reorganizar seu HTML. É para isso que serve a propriedade order.

A propriedade order é aplicada diretamente aos Itens Flex e permite que você especifique a ordem em que um item específico deve aparecer dentro do Contêiner Flex.

Pense na propriedade order como um "número de chamada" para os membros de uma equipe (flex-items). Mesmo que a lista de nomes (HTML) esteja em uma ordem, você pode dar um número de chamada diferente para cada um, e eles se apresentarão na ordem desses números, não na ordem original da lista.

Como funciona order

• Valor Padrão: O valor padrão de order para todos os Itens Flex é 0.
• Números Inteiros: Você pode atribuir qualquer número inteiro (positivo, negativo ou zero) a um Item Flex.
• Ordenação: Os itens são organizados no contêiner em ordem crescente de seus valores de order.
  • Itens com order menor aparecem primeiro.
  • Itens com order maior aparecem depois.
  • Se dois ou mais itens tiverem o mesmo valor de order, eles serão ordenados de acordo com sua ordem no código HTML original.

Importante: A propriedade order altera apenas a ordem visual dos itens. A ordem no HTML (DOM - Document Object Model) permanece a mesma. Isso tem implicações para a acessibilidade e para a navegação por teclado.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Order</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;
      margin-bottom: 20px;
      justify-content: center; /* Para centralizar os itens */
    }

    .flex-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      margin: 5px;
      color: #333;
      font-weight: bold;
      text-align: center;
      width: 80px;
      height: 60px;
      line-height: 60px;
      /* order: 0; */ /* Valor padrão */
    }

    /* --- Exemplos de order --- */

    .item-1 {
      order: 1;
    }

    .item-2 {
      order: 2;
    }

    .item-negativo {
      order: -1; /* Aparecerá antes dos itens com order: 0 */
      background-color: lightcoral;
    }

    .item-maior {
      order: 99; /* Aparecerá por último */
      background-color: lightgreen;
    }

    .item-zero {
      order: 0; /* Explícito, mas é o padrão */
      background-color: lightgoldenrodyellow;
    }
  </style>
</head>
<body>
  <h1>Propriedade `order`</h1>

  <h2>Exemplo Básico</h2>
  <div class="flex-container">
    <div class="flex-item item-1">Item 1 (order: 1)</div>
    <div class="flex-item item-2">Item 2 (order: 2)</div>
    <div class="flex-item">Item 3 (order: 0 - padrão)</div>
    <div class="flex-item item-negativo">Item Negativo (order: -1)</div>
    <div class="flex-item item-maior">Item Maior (order: 99)</div>
    <div class="flex-item item-zero">Item Zero (order: 0)</div>
  </div>
  <p>Observe a ordem visual dos itens. Itens com `order` menor aparecem primeiro. Itens com o mesmo `order` (como "Item 3" e "Item Zero") seguem a ordem do HTML.</p>

  <h2>Ordem do HTML vs. Ordem Visual</h2>
  <p>A ordem dos elementos no código HTML é:</p>
  <pre>
    <div class="flex-item item-1">Item 1 (order: 1)</div>
    <div class="flex-item item-2">Item 2 (order: 2)</div>
    <div class="flex-item">Item 3 (order: 0 - padrão)</div>
    <div class="flex-item item-negativo">Item Negativo (order: -1)</div>
    <div class="flex-item item-maior">Item Maior (order: 99)</div>
    <div class="flex-item item-zero">Item Zero (order: 0)</div>
  </pre>
  <p>Mas a ordem visual na tela é diferente devido à propriedade `order`.</p>
</body>
</html>

Resultado:

• Você verá que os itens serão exibidos na seguinte ordem visual: "Item Negativo", "Item 3", "Item Zero", "Item 1", "Item 2", "Item Maior".
• Os itens com order: -1 aparecem primeiro.
• Depois, os itens com order: 0 (o padrão) aparecem na ordem em que estão no HTML.
• Por fim, os itens com order: 1, 2 e 99 aparecem em ordem crescente.

Boas Práticas:

• Acessibilidade: Use order com cautela. Mudar a ordem visual pode confundir usuários de leitores de tela ou aqueles que navegam pela página usando a tecla Tab, pois eles seguirão a ordem do HTML (DOM), não a ordem visual.
• Pequenos Ajustes: order é mais adequado para pequenos ajustes na ordem de itens, como mover um botão de ação para o final de um grupo em telas menores, sem alterar a estrutura semântica do HTML.
• Valores Simples: Tente usar valores de order simples e sequenciais (ex: 1, 2, 3) ou apenas 0, 1, -1 para mover itens para o início ou fim. Evite números muito grandes ou complexos, pois podem dificultar a manutenção.
• Não Substitui o HTML: order não deve ser usado como uma desculpa para ter um HTML semântico ou lógico. O HTML deve sempre refletir a estrutura e a ordem lógica do conteúdo.

A propriedade order é uma ferramenta poderosa para adaptar layouts Flexbox a diferentes necessidades visuais, especialmente em designs responsivos, mas deve ser usada com consciência de suas implicações.