order: riordinare visivamente senza toccare l'HTML

La proprietà order permette di cambiare l’ordine visivo dei flex items senza spostare gli elementi nell’HTML.

È potente, ma va usata con attenzione: lo schermo cambia, il DOM no. Screen reader, selezione del testo e navigazione da tastiera continuano a seguire l’ordine del documento.

Come funziona

Ogni flex item ha di default:

.item {
  order: 0;
}

Gli elementi con valore più basso vengono mostrati prima. Gli elementi con valore più alto vengono mostrati dopo.

<div class="layout">
  <main>Contenuto principale</main>
  <aside>Sidebar</aside>
</div>

.layout {
  display: flex;
  gap: 2rem;
}

aside {
  order: -1;
}

In questo esempio la sidebar appare prima del contenuto principale, anche se nell’HTML viene dopo.

Uso responsabile nel responsive design

order può essere utile per piccoli aggiustamenti responsive.

.hero {
  display: flex;
  flex-direction: column;
}

.hero-media {
  order: -1;
}

@media (width >= 768px) {
  .hero {
    flex-direction: row;
  }

  .hero-media {
    order: 0;
  }
}

Su mobile l’immagine appare prima, su desktop torna nell’ordine naturale. Questo può essere accettabile se l’ordine di lettura rimane sensato anche senza CSS.

Il rischio principale: accessibilità

Non usare order per correggere una struttura HTML sbagliata.

Se l’ordine logico è questo:

1. titolo;
2. descrizione;
3. azione principale;

allora anche l’HTML dovrebbe rispettarlo. Usare order per mostrare il bottone prima del titolo può confondere chi naviga da tastiera o con tecnologie assistive.

Regola pratica:

• se il cambio è solo estetico e l’ordine di lettura resta comprensibile, order può andare bene;
• se il cambio modifica il significato della pagina, correggi l’HTML.

Alternative migliori

Prima di usare order, valuta:

• scrivere l’HTML nell’ordine logico corretto;
• cambiare flex-direction fra row e column;
• usare CSS Grid per posizionare aree diverse senza alterare la sequenza semantica;
• duplicare contenuti solo se strettamente necessario e gestendo bene aria-hidden, ma è una scelta da evitare nei corsi base.

Esercizio

Crea una card con immagine, titolo, testo e bottone. Scrivi l’HTML nell’ordine più naturale per la lettura. Poi usa order solo per spostare l’immagine sopra o sotto in base alla larghezza dello schermo.

Alla fine verifica con il tasto Tab: il focus deve seguire ancora un percorso comprensibile.