Order - Propriété CSS
Résumé des caractéristiques de la propriété order
0
order
passe d'un nombre entier à un autre, sans transition.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
et2
, 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.
Prise en charge de order
(compatibilité).
Tout est vert : aucun problème de compatibilité à signaler.
order
pour définir l'ordre d'affichage des éléments dans un conteneur flex-box.order
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
Historique de la propriété order
.
-
Module CSS - Mise en page par flex-box - Niveau 1
Définition de la propriétéorder
dans le cadre d'un flex-box.23 Juillet 2009Document de travail.18 Septembre 2012Candidat à la recommandation. -
Module CSS - Affichage - Niveau 3
Description de la propriétéorder
.20 Février 2014Document de travail.28 Août 2018Candidat à la recommandation.
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.