order

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

Note : order est uniquement conçu 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.

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é
Animableoui, comme un entier
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Pour plus d'informations sur les propriétés flexibles, lire l'article : utiliser les boîtes flexibles CSS (flexbox).

Syntaxe

/* Valeurs entières, positives ou négatives */
order: 5;
order: -5; 

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

Valeurs

<integer>
Un nombre entier 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

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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 21.0-webkit
29
18.0 (18.0)[1]
20.0 (20.0)
28[3]

10.0-ms[2]
11

12.10 7 -webkit
9
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? 18.0 (18.0)[1]
20.0 (20.0)[3]
? 12.10 7 -webkit
9

[1] Pour activer le support des boîtes flexibles dans Firefox 18 et 19, il faut activer la préférence layout.css.flexbox.enabled avec la valeur true sous about:config. Les boîtes flexibles à plusieurs lignes sont supportées depuis Firefox 28. Actuellement, Firefox modifie, de façon incorrecte, l'ordre de tabulation des éléments : bug 812687.

[2] Pour Internet Explorer 10, un conteneur flexible est déclaré avec display:-ms-flexbox et non avec display:flex. La propriété est implémentée avec l'intitulé non-standard -ms-flex-order.

[3] En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Étiquettes et contributeurs liés au document

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