Ordine degli elementi flex in CSS

Supponiamo di avere i seguenti blocchi, allineati in una riga:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Cambiamo l'ordine in cui vengono visualizzati sullo schermo, senza modificare il loro ordine nel codice HTML.

Per fare ciò esiste la proprietà order, che imposta l'ordine di disposizione di elementi specifici secondo la seguente regola: chi ha un valore maggiore si posiziona più vicino alla fine dell'asse, mentre chi ha un valore minore si posiziona più vicino all'inizio.

Il valore della proprietà può essere un numero positivo o negativo. Per impostazione predefinita, tutti gli elementi seguono uno dopo l'altro, ciò significa che il loro order è zero.

Cambiamo l'ordine dei nostri elementi. Per fare ciò, assegniamo al secondo elemento una classe aggiuntiva "elem" e per questa classe impostiamo la proprietà order al valore 1:

.elem {
	order: 1;
	border: 1px solid red;
}

Poiché tutti gli elementi avranno per impostazione predefinita un ordine di 0, e il nostro secondo elemento avrà un ordine maggiore degli altri, allora si posizionerà dopo di loro:

Assegniamo ora un valore negativo -1:

.elem {
	order: -1;
	border: 1px solid red;
}

In questo caso il nostro blocco si sposterà all'inizio dell'asse:

Sperimentate in autonomia il funzionamento di questa proprietà per diverse direzioni dell'asse.