Metodi di utilizzo e esempi dell'attributo order CSS3

L'attributo order CSS specifica l'ordine di visualizzazione e layout degli elementi all'interno di un contenitore elastico. Gli elementi sono ordinati in ordine crescente del valore di ordine. Gli elementi con lo stesso valore di ordine sono posizionati nell'ordine in cui compaiono nel codice sorgente.

La tabella sottostante fornisce una descrizione dell'uso di questa proprietà, la cronologia delle versioni, nonché la sintassi di utilizzo di questa proprietà nei script JavaScript.

Utilizzo della sintassi di order

La sintassi di questa proprietà è la seguente:

order:　integer　|　initial　|　inherit

Esempio seguente dimostra come utilizzare l'attributo order.

.flex-container　{
　　　　border:　2px　solid　#000;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
}

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Compatibilità del browser

Compatibilità del browser per l'attributo order, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; tutti i browser mainstream supportano questa proprietà.

Leggi di più

Esegui la seguente guida:Caratteri CSS，Unità CSS，Elementi pseudo di CSS。

Proprietà correlate: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.