Ordre des blocs flex en CSS

Supposons que nous ayons les blocs suivants, alignés en rangée :

<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;
}

Modifions leur ordre d'affichage à l'écran, sans changer leur ordre dans le code HTML.

Pour cela, il existe la propriété order, qui définit l'ordre des éléments spécifiques selon la règle suivante : celui qui a la valeur la plus grande se place plus près de la fin de l'axe, et celui qui a la valeur la plus petite - se place plus près du début.

La propriété peut prendre une valeur numérique positive ou négative. Par défaut, tous les éléments se suivent, cela signifie que leur order est nul.

Modifions l'ordre de nos éléments. Pour cela, attribuons au deuxième élément une classe supplémentaire "elem" et pour cette classe définissons la propriété order avec la valeur 1 :

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

Puisque tous les éléments auront par défaut un ordre de 0, et que notre deuxième élément aura un ordre supérieur aux autres, il se placera après eux :

Maintenant, donnons une valeur négative -1 :

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

Dans ce cas, notre bloc se déplacera au début de l'axe :

Testez par vous-même le fonctionnement de cette propriété pour différentes directions de l'axe.