order

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

La propriété order définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. 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.

Exemple interactif

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

css
/* 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.

Définition formelle

Valeur initiale0
ApplicabilitéFlex items, grid items, and absolutely-positioned flex and grid container children
Héritéenon
Valeur calculéecomme spécifié
Type d'animationun entier

Syntaxe formelle

order = 
<integer>

Exemples

HTML

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.

css
#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

Specification
CSS Display Module Level 3
# order-property

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
order

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi