Proprietà CSS order

La proprietà order controlla la posizione di un elemento flex o grid lungo il suo asse, consentendo di modificare l'ordine visivo degli elementi senza cambiarne l'ordine nell'HTML. Fa parte del modulo Flexible Box Layout ed è una delle proprietà CSS3.

Per impostazione predefinita ogni elemento ha order: 0, quindi gli elementi appaiono nell'ordine della sorgente. Gli elementi sono disposti in ordine crescente di valore order; gli elementi con lo stesso valore order mantengono il loro ordine nella sorgente rispetto agli altri. Questo rende order utile per operazioni come spostare una barra laterale prima del contenuto principale su schermi larghi, o riordinare le card all'interno di un layout Flexbox o CSS Grid, lasciando il markup invariato.

Informazione

order influisce solo sui figli diretti di un contenitore flex o grid. Se l'elemento non è un elemento flex o grid, order non ha effetto.

Come funzionano i valori

order accetta qualsiasi intero, inclusi i valori negativi:

Un elemento con un valore order più basso appare prima; uno più alto appare dopo.
Poiché il valore iniziale è 0, impostare un elemento a -1 è un modo rapido per spostarlo prima di tutti gli altri.
Gli elementi con lo stesso valore order tornano al loro ordine nel DOM, quindi di solito è necessario impostare order solo sui pochi elementi che si vuole spostare.

.first  { order: -1; } /* moves before all default (0) items */
.middle { order:  0; } /* default, can be omitted */
.last   { order:  1; } /* moves after all default items */

Considerazioni sull'accessibilità

order crea una disconnessione tra la visualizzazione visiva del contenuto e il suo ordine nel DOM. Il riordinamento visivo non modifica il DOM, quindi non cambia l'ordine di lettura per gli screen reader né l'ordine di tabulazione per gli utenti da tastiera. Chi naviga con il tasto Tab o usa uno screen reader seguirà l'ordine della sorgente originale, non il layout riordinato — il che può creare confusione se i due differiscono significativamente. Mantieni il DOM in un ordine di lettura logico e usa order solo per aggiustamenti presentazionali.

Valore iniziale	0
Si applica a	Elementi flex e grid.
Ereditata	No.
Animabile	No. La proprietà order è discreta e non animabile.
Versione	CSS3
Sintassi DOM	Object.style.order = "4";

Sintassi

Sintassi CSS order

order: number | initial | inherit;

Esempio della proprietà order:

Esempio di codice CSS order

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 400px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
      }
      #example div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-family: sans-serif;
      }
      div#blue {
        order: 2;
      }
      div#green {
        order: 3;
      }
      div#grey {
        order: 1;
      }
      div#yellow {
        order: 4;
      }
    </style>
  </head>
  <body>
    <h2>Order property example</h2>
    <div id="example">
      <div style="background-color: #1c87c9;" id="blue">1</div>
      <div style="background-color: #8ebf42;" id="green">2</div>
      <div style="background-color: #666;" id="grey">3</div>
      <div style="background-color: #f4f442;" id="yellow">4</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà order applicata alla classe container:

Esempio CSS order con Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
      }
      .box:nth-of-type(1) {
        order: 4;
      }
      .box:nth-of-type(2) {
        order: 1;
      }
      .box:nth-of-type(3) {
        order: 3;
      }
      .box:nth-of-type(4) {
        order: 5;
      }
      .box:nth-of-type(5) {
        order: 2;
      }
      .box {
        background: #1c87c9;
        padding: 5px;
        width: 100px;
        height: 100px;
        margin: 5px;
        line-height: 100px;
        color: #eee;
        font-weight: bold;
        font-size: 2em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Order property</h2>
    <ul class="container">
      <li class="box">1</li>
      <li class="box">2</li>
      <li class="box">3</li>
      <li class="box">4</li>
      <li class="box">5</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

In entrambi gli esempi la proprietà order riorganizza gli elementi sullo schermo mentre l'HTML rimane nella sua sequenza originale — a ciascun elemento viene semplicemente assegnato il numero che lo posiziona dove si desidera.

order è uno dei vari strumenti di allineamento Flexbox. Combinala con flex-direction per impostare l'asse principale, justify-content per distribuire gli elementi lungo quell'asse, e align-items per allinearli sull'asse trasversale.

Valori

Valore	Descrizione
number	Definisce l'ordine dell'elemento flex o grid nel contenitore. Il valore predefinito è 0.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Pratica

Cosa fa la proprietà CSS 'order'?

Viene usata per disporre gli elementi flex lungo l'asse principale.Permette a un elemento di comportarsi come un elemento a livello di blocco.Viene usata per specificare l'allineamento verticale di un box inline o di tipo table-cell.Imposta l'ordine di apparizione di un elemento all'interno di un contenitore.