La propriété CSS order

La propriété order contrôle la position d'un élément flex ou grid le long de sa piste, vous permettant de modifier l'ordre visuel des éléments sans changer leur ordre dans le HTML. Elle fait partie du module Flexible Box Layout et est l'une des propriétés CSS3.

Par défaut, chaque élément a order: 0, donc les éléments apparaissent dans l'ordre source. Les éléments sont disposés par valeur order croissante ; les éléments ayant le même order conservent leur ordre source les uns par rapport aux autres. Cela rend order utile pour des tâches comme déplacer une barre latérale avant le contenu principal sur les grands écrans, ou réorganiser des cartes dans une mise en page Flexbox ou CSS Grid, tout en laissant le balisage inchangé.

Info

order n'affecte que les enfants directs d'un conteneur flex ou grid. Si l'élément n'est pas un élément flex ou grid, order n'a aucun effet.

Fonctionnement des valeurs

order accepte n'importe quel entier, y compris les valeurs négatives :

Un élément avec une valeur order plus faible apparaît en premier ; une valeur plus élevée apparaît en dernier.
Comme la valeur initiale est 0, définir un élément à -1 est un moyen rapide de le placer avant tous les autres.
Les éléments partageant la même valeur order se rabattent sur leur ordre dans le DOM, vous n'avez donc généralement besoin de définir order que sur les quelques éléments que vous souhaitez déplacer.

.first  { order: -1; } /* moves before all default (0) items */
.middle { order:  0; } /* default, can be omitted */
.last   { order:  1; } /* moves after all default items */

Considérations d'accessibilité

order crée une déconnexion entre l'affichage visuel du contenu et son ordre dans le DOM. La réorganisation visuelle ne change pas le DOM, elle ne modifie donc pas l'ordre de lecture pour les lecteurs d'écran ni l'ordre de tabulation pour les utilisateurs au clavier. Une personne naviguant par tabulation ou utilisant un lecteur d'écran suivra l'ordre source original, et non la disposition réorganisée — ce qui peut prêter à confusion si les deux diffèrent significativement. Maintenez le DOM dans un ordre de lecture logique et utilisez order uniquement pour des ajustements de présentation.

Valeur initiale	0
S'applique à	Les éléments flex et grid.
Hérité	Non.
Animatable	Non. La propriété order est discrète et non animatable.
Version	CSS3
Syntaxe DOM	Object.style.order = "4";

Syntaxe

Syntaxe CSS de order

order: number | initial | inherit;

Exemple de la propriété order :

Exemple de code CSS order

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 400px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
      }
      #example div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-family: sans-serif;
      }
      div#blue {
        order: 2;
      }
      div#green {
        order: 3;
      }
      div#grey {
        order: 1;
      }
      div#yellow {
        order: 4;
      }
    </style>
  </head>
  <body>
    <h2>Order property example</h2>
    <div id="example">
      <div style="background-color: #1c87c9;" id="blue">1</div>
      <div style="background-color: #8ebf42;" id="green">2</div>
      <div style="background-color: #666;" id="grey">3</div>
      <div style="background-color: #f4f442;" id="yellow">4</div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété order appliquée à la classe container :

Exemple CSS order avec Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
      }
      .box:nth-of-type(1) {
        order: 4;
      }
      .box:nth-of-type(2) {
        order: 1;
      }
      .box:nth-of-type(3) {
        order: 3;
      }
      .box:nth-of-type(4) {
        order: 5;
      }
      .box:nth-of-type(5) {
        order: 2;
      }
      .box {
        background: #1c87c9;
        padding: 5px;
        width: 100px;
        height: 100px;
        margin: 5px;
        line-height: 100px;
        color: #eee;
        font-weight: bold;
        font-size: 2em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Order property</h2>
    <ul class="container">
      <li class="box">1</li>
      <li class="box">2</li>
      <li class="box">3</li>
      <li class="box">4</li>
      <li class="box">5</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Dans les deux exemples, la propriété order réorganise les éléments à l'écran tandis que le HTML reste dans sa séquence d'origine — chaque élément se voit simplement attribuer le numéro qui le place là où vous le souhaitez.

order est l'un des plusieurs outils d'alignement Flexbox. Combinez-le avec flex-direction pour définir l'axe principal, justify-content pour espacer les éléments le long de cet axe, et align-items pour les aligner sur l'axe transversal.

Valeurs

Valeur	Description
number	Définit l'ordre de l'élément flex ou grid dans le conteneur. La valeur par défaut est 0.
initial	Applique la valeur par défaut de la propriété.
inherit	Hérite de la propriété depuis son élément parent.

Exercice

Pratique

Que fait la propriété CSS 'order' ?

Elle est utilisée pour disposer les éléments flex le long de l'axe principal.Elle permet à un élément de se comporter comme un élément de bloc.Elle est utilisée pour spécifier l'alignement vertical d'une boîte en ligne ou de cellule de tableau.Elle définit l'ordre d'apparition d'un élément dans un conteneur.