La propriété order définit l'ordre avec lequel on dessine les éléments flexibles ou d'une grille dans leur conteneur flexible ou dans la grille. Les éléments sont appliqués dans l'ordre croissant des valeurs de order. Les éléments ayant la même valeur pour order seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document.

Note : order est uniquement conçue pour affecter l'ordre visuel. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. order ne doit pas être utilisée avec les média non visuels comme les informations vocales.

Syntaxe

/* Valeurs entières (type <integer>) */
/* positives ou négatives */
order: 5;
order: -5; 

/* Valeurs globales */
order: inherit;
order: initial;
order: unset;

Valeurs

<integer>
Un nombre entier (cf. <integer>) indiquant l'ordre à appliquer pour l'élément flexible.

Syntaxe formelle

<integer>

Exemples

HTML

<div id='main'>
   <article>Lorem ipsum</article>
   <nav> consectetur adipisicing elit, sed do eiusmod</nav>
   <aside>tempor incididunt ut labore et dolore magna</aside>
</div>

CSS

Grâce à ces déclarations CSS, on crée un disposition avec deux barres entourant un bloc de contenu. Le module de disposition des boîtes flexibles crée des bloc de tailles verticales égales et utilise autant d'espace horizontal qu'il y en a de disponible.

#main {
  display: flex;
}

#main > article {
  flex:1;
  order: 2;
  border: 1px dotted orange;
}

#main > nav {
  width: 200px;
  order: 1;
  border: 1px dotted blue;
}

#main > aside {
  width: 200px;
  order: 3;
  border: 1px dotted blue;
}

Résultat

Accessibilité

La propriété order créera une incohérence entre l'ordre de présentation visuelle et celui du DOM. Cela aura un impact négatif pour les utilisateurs avec des troubles de la vision et qui utilisent des outils d'assistance comme les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct.

Spécifications

Spécification État Commentaires
CSS Flexible Box Layout Module
La définition de 'order' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initiale0
Applicabilitééléments flexibles, ainsi que les enfants absolument positionnés de conteneurs flexibles
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationun entier
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 48
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 18 — 28
Désactivée
Désactivée From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 12.1Safari Support complet 9
Support complet 9
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 20
Notes
Support complet 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 48
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 18 — 28
Désactivée
Désactivée From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 12.1Safari iOS Support complet 9
Support complet 9
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android ?
Absolutely-positioned flex childrenChrome Support complet OuiEdge Support complet 12Firefox Aucun support NonIE Support complet 10Opera Support complet 12.1Safari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 12.1Safari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tzilliox
Dernière mise à jour par : SphinxKnight,