CSS order
La proprietà CSS3 order imposta l'ordine visivo degli elementi Flex
La proprietà order è una funzionalità di CSS3 utilizzata con i layout flex. Essa permette di cambiare la sequenza di visualizzazione degli elementi figli indipendentemente dall'ordine in cui compaiono nel codice HTML. Valori più bassi portano l'elemento più a sinistra (o in alto), valori più alti lo spostano più a destra (o in basso).
Sintassi
Significato dei valori principali:
-
numero intero (es.
0,1,-1): Stabilisce la posizione dell'elemento nel layout flex. Gli elementi con un valoreorderinferiore appaiono prima, mentre quelli con un valore più alto vengono posizionati dopo. -
default (0): Se non specificato, tutti gli elementi hanno
order: 0, quindi vengono visualizzati secondo l’ordine nel DOM.
Esempio proprietà: order
Codice Esempio: order
.flex-container {
display: flex;
gap: 10px;
}.flex-item {
width: 100px;
height: 100px;
background-color: #ff6347;
color: white;
font-size: 20px;
text-align: center;
line-height: 100px;
border-radius: 8px;
}.item-1 {
order: 3;
}.item-2 {
order: 1;
}.item-3 {
order: 2;
}
Contenuto Esempio: order
Esempio di utilizzo di order
In questo esempio, l'ordine degli elementi viene modificato usando la proprietà order:
CSS e HTML per la proprietà order:
<style>
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #ff6347;
color: white;
font-size: 20px;
text-align: center;
line-height: 100px;
border-radius: 8px;
}
.item-1 {
order: 3;
}
.item-2 {
order: 1;
}
.item-3 {
order: 2;
}
</style>
<div class="flex-container">
<div class="flex-item item-1">1</div>
<div class="flex-item item-2">2</div>
<div class="flex-item item-3">3</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
