Proprietà order e riordinamento visivo
Modifichi l'ordine visivo dei flex item senza cambiare il DOM usando la proprietà order.
Proprietà order e riordinamento visivo è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
La proprietà order
La proprietà order modifica l'ordine visivo degli elementi flex e grid senza alterare la struttura del DOM. Il valore predefinito è 0; i valori più alti compaiono dopo, mentre quelli negativi compaiono prima.
Nozioni di base su order
Gli elementi vengono visualizzati dal valore order più basso a quello più alto. Gli elementi con lo stesso valore order vengono visualizzati nell'ordine del DOM.
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
order negativo
Utilizzi valori negativi per spostare un elemento prima di tutti quelli predefiniti (order:0):
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
Riordinamento reattivo
Modifichi l'ordine visivo in corrispondenza di diversi punti di interruzione senza cambiare l'HTML:
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
Importante: avvertenza sull'accessibilità
order modifica solo l'ordine visivo. I lettori di schermo e la navigazione da tastiera seguono l'ordine del DOM, non quello visivo. Per l'accessibilità è fondamentale riordinare visivamente gli elementi mantenendo il DOM in un ordine di lettura logico.
Incoerenza nell'ordine di tabulazione
Se riordina visivamente gli elementi con order, il focus della scheda segue l'ordine del DOM, che può differire da quello visivo. Questo crea una navigazione confusa per chi usa la tastiera. Utilizzi il riordinamento visivo solo quando non interrompe la sequenza logica.
Casi d'uso legittimi comuni
Il riordinamento visivo è accettabile quando:
- Gli elementi non fanno parte di una sequenza navigabile, ad esempio per un ordinamento decorativo
- L'ordine visivo corrisponde a un flusso di lettura naturale diverso dall'ordine nel codice sorgente per motivi organizzativi del codice
order in Flexbox e Grid
La proprietà order funziona allo stesso modo sia in Flexbox sia in CSS Grid. Controlla l'ordine all'interno dell'algoritmo di layout, non quello del DOM.
order con flex-wrap
Quando gli elementi vanno a capo su nuove righe, order determina quali elementi compaiono su ciascuna riga e in quale sequenza all'interno della riga.
Inversione di tutti gli elementi
Per invertire tutti gli elementi, utilizzi flex-direction: row-reverse o column-reverse invece di impostare valori negativi di order su ogni elemento. È una soluzione più semantica e semplice.
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Animazione con order
Le modifiche a order non sono animabili in CSS. Se ha bisogno di riordinare gli elementi con un'animazione, utilizzi le trasformazioni o animazioni gestite da JavaScript, come Flip.js o il plugin Flip di GSAP.
Verifica rapida
Perché è necessario utilizzare con cautela la proprietà order per riordinare i link di navigazione?
Riepilogo
order modifica la posizione visiva degli elementi flex/grid senza modificare l'HTML. Il valore predefinito è 0; i valori più bassi vengono visualizzati per primi, quelli più alti per ultimi. Lo utilizzi per riordinare gli elementi in modo responsive senza modificare la struttura del DOM. Quando utilizza order per riordinare gli elementi, verifichi sempre che l'ordine della navigazione da tastiera e quello letto dagli screen reader rimangano logici.
Domande Frequenti
La lezione «Proprietà order e riordinamento visivo» è gratuita?
Sì — il testo completo di «Proprietà order e riordinamento visivo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Proprietà order e riordinamento visivo»?
Modifichi l'ordine visivo dei flex item senza cambiare il DOM usando la proprietà order. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Proprietà order e riordinamento visivo»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Override dell'allineamento dei flex item con align-self
- Proprietà order e riordinamento visivo
- Pattern della sintassi abbreviata flex
- Layout Flexbox comuni: nav, card e media object