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
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)

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 dans le document.

Si plusieurs éléments du flex-box 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.

Valeurs pour order.

  • 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.

Valeurs communes :

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 order (exemple).

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.

order :
1
2
 
4
5

Prise en charge de order (compatibilité).

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 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
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 d'un élément contenu dans un flex-box.
flex-wrap
Gestion des retours à la ligne dans un container flex-box.