order - Propriété CSS
Résumé des caractéristiques de la propriété order
0
order
passe d'une valeur à l'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.
Syntaxes 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
. La valeur initiale est :
.0
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.
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
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que order
.
Les spécifications CSS éditées par le W3C sont organisées en modules. order
fait partie du Module CSS - Mise en page par flex-box (CSS Flexible Box Layout Module). Les définitions suivantes sont également décrites dans ce même module.