CSS - Propriété order

Description de la propriété `order`.

order définit la position d'un élément dans un flex-box. Il est ainsi possible de positionner les éléments indifféremment de leur ordre d'arrivée.

order: 3;

L'élément est placé après les éléments portant les numéros 1 et 2, et avant les éléments portant un numéro supérieur à 3.

order attend une valeur numérique positive ou négative, sans unité.

La valeur par défaut est 0.
order: initial;

La valeur initiale est 0.
order: unset; order: inherit;

Reportez-vous à la description générale de ces valeurs.

Le simulateur ci-dessous modifie la propriété order de l'élément rouge. La valeur order de chacun des éléments est affichée.

order :

align-content : Disposition des lignes dans un flex-box ou une grille.
align-items : Disposition verticale des éléments dans un flex-box ou une grille.
align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
display : Type de l'élément et la façon de l'afficher.
flex : Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
flex-direction : Choisit l'axe principal et l'axe secondaire d'un flex box.
flex-flow : Echaînement des éléments enfant dans un flex-box.
flex-grow : Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
flex-wrap : Gestion des retours à la ligne dans un container flex.
justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.