Propriété order

La propriété order définit l'ordre de disposition d'un bloc flex individuel à l'intérieur d'un conteneur flex. Elle s'applique à un bloc flex spécifique.

La propriété prend comme valeur un nombre entier positif ou négatif. Plus le nombre est petit, plus l'élément apparaîtra tôt, indépendamment de sa position dans le code HTML par rapport aux autres éléments.

Syntaxe

sélecteur {
	order: nombre positif ou négatif;
}

Exemple

Dans cet exemple, l'ordre de disposition de tous les blocs est défini à l'aide de order. Le premier bloc sera celui avec un order négatif -1, puis celui avec un order de 1, et ainsi de suite par ordre croissant :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
	<div id="elem6">6</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}
#parent > div {
	border: 1px solid #696989;
	min-width: 100px;
}
#elem1 {
	order: 4;
}
#elem2 {
	order: 5;
}
#elem3 {
	order: 3;
}
#elem4 {
	order: 2;
}
#elem5 {
	order: 1;
}
#elem6 {
	order: -1;
}

Voir aussi

la propriété flex-direction,
qui définit la direction des axes des blocs flex
la propriété justify-content,
qui définit l'alignement le long de l'axe principal
la propriété align-items,
qui définit l'alignement le long de l'axe transversal
la propriété flex-wrap,
qui définit le retour à la ligne des blocs flex
la propriété flex-flow,
raccourci pour flex-direction et flex-wrap
la propriété align-self,
qui définit l'alignement d'un seul bloc
la propriété flex-basis,
qui définit la taille d'un bloc flex spécifique
la propriété flex-grow,
qui définit la capacité d'expansion des blocs flex
la propriété flex-shrink,
qui définit la capacité de rétrécissement des blocs flex
la propriété flex,
raccourci pour flex-grow, flex-shrink et flex-basis