Propriété CSS order

La propriété order spécifie l'ordre de l'élément flexible dans le conteneur flexible ou dans la grille.

La propriété order fait une partie de Flexible Box Layout module.

Si l'élément n'est pas flexible, la propriété order ne fonctionne pas.

Valeur initiale	0
Appliquée à	Éléments flexibles et les enfants absolument positionnés de conteneurs flexibles.
Héritée	Non.
Animable	Oui. L'ordre des éléments est animable.
Version	CSS3
Syntaxe DOM	Object.style.order = "4";

Syntaxe

order: number | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      #example {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      #example div {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #fff;
      font-size: 30px;
      font-family: sans-serif;
      }
      /* Safari 6.1+ */
      div#blue {-webkit-order: 2;}
      div#green  {-webkit-order: 3;}
      div#grey {-webkit-order: 1;}
      div#yellow  {-webkit-order: 4;}
      /* Syntaxe standarde */
      div#blue   {order: 2;}
      div#green  {order: 3;}
      div#grey {order: 1;}
      div#yellow  {order: 4;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété order</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!

Un autre exemple avec la propriété order :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .container {
      padding: 0;
      margin: 0;
      list-style: none;
      -ms-box-orient: horizontal;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      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>Propriété order</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!

Valeurs

Valeur	Description
number	Définit l'ordre de l'élément flexible dans le conteneur. La valeur initiale est 0.
initial	Fait la propriété utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.