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>

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>

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.

Support de Navigateurs

29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+


Trouvez-vous cela utile?

Articles Associées