Order - Propriété CSS

order

Résumé des caractéristiques de la propriété order

Description rapide
Définit l'ordre des éléments dans un flex-box.
Statut
Standard
S'applique à
Conteneurs flex-box et conteneurs grille.
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
0
Héritée par défaut
Non.
Type d'animation
Integer : lors d'une animation, la propriété order passe d'un nombre entier à un autre, sans transition.
Module W3C
Module CSS - Mise en page par flex-box
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

Description de la propriété order.

order définit la position d'un élément dans un conteneur flex ou une grille. Il est ainsi possible de positionner les éléments indifféremment de leur ordre dans le document.

Si plusieurs éléments ont la même valeur pour order, ils seront affichés dans l'ordre du document (le code HMTL).

Il faut garder à l'esprit que d'autres propriétés ont un impact sur l'ordre d'affichage des éléments : flex-direction, flex-wrap, etc.

Cas des conteneur flex.

Dans le cas d'un conteneur flex, il ne peut pas y avoir superposition d'éléments, order dans ce cas ne gère que l'ordre d'affichage. Les valeurs pour order sont inscrites dans chacun des éléments.

0
1
2
3
4
5
Élément bleu : order:0
4
1
2
3
4
5
Élément bleu : order:4

Cas des conteneurs grille.

Dans le cas des conteneurs grille, order ne doit être utilisé que en cas de chevauchement de plusieurs cellules, pour déterminer laquelle sera affichée au dessus, ou lorsque l'ordre d'affichage doit être différent de l'ordre dans le document HTML. Dans la plupart des cas, il est préférable de réorganiser le document HTML.

Dans l'exemple ci-dessous, nous avons un grille dont tous les éléments couvrent 2 lignes et 2 colones. L'un des éléments étant placé au centre, il empiète sur les autres cellules. Dans le premier cas de figure (order:0) il se retrouve derrière les autres cellules, dans le deuxième cas (order:5) il est devant. Le numéro d'ordre des éléments est inscrit dessus.

0
1
2
3
4
Élément bleu : order:0;
5
1
2
3
4
Élément bleu : order:5;

Note : la propriété a un effet visuellement comparable à order, mais elle crée un plus un contexte d'empilement.

Valeurs pour order.

  • order: 3;

    L'élément est placé après les éléments portant order:1 et order:2, et avant les éléments portant un numéro supérieur à 3. Par rapport aux éléments order:3 l'ordre est déterminé en fonction de l'apparition dans le code HTML.

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

    La valeur par défaut est 0.

  • order: initial; (0) order: inherit; order: revert; order: revertLayer; order: unset;

    Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété order.

L'effet visuel ci-dessous a été obtenu en animant la propriété order. Pour que l'élément qui reçoit l'animation (le premier) parcourt bien toute la suite des autres éléments, il a fallu attribuer à chacun des autres éléments une valeur différente pour order. En effet la valeur par défaut de order est 0 ; si tous les éléments ont cette valeur identique, l'élément mobile ne pourra pas s'insérer entre chacun d'eux.

Quant à l'effet de retour rapide au départ, il a été obtenu en arrêtant l'animation à 90%, avec une étape supplémentaire pour redonner sa valeur de départ à order sur les 10% de temps restants.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Simulateur avec la propriété order.

Le simulateur ci-dessous modifie la propriété order de l'élément rouge. La valeur order de chacun des autres éléments est affichée. L'élément rouge apparaît en troisième position dans le code HTML.

order :
1
2
 
3
4

Prise en charge de order par les navigateurs.

Tout est vert : aucun problème de compatibilité à signaler.

Colonne 1
Support de la propriété order pour définir l'ordre d'affichage des éléments dans un conteneur flex-box.
1
Propriété
order
Estimation de la prise en charge globale.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la propriété order.

Voir aussi, à propos des flex-box.

Les spécificités des flex-box sont décrites dans le module CSS Flexible Box Layout Module. La propriété order y figure, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :

flex
Propriété raccourcie pour définir les principales caractéristiques relatives aux dimensions des éléments internes à un flex-box.
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
Enchaî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 (réduction de la largeur) d'un élément contenu dans un flex-box.
flex-wrap
Gestion des retours à la ligne dans un container flex-box.