CSS : order - Web Formation

Description

La propriété order permet de modifier l’ordre d’affichage visuel des éléments dans un conteneur Flexbox (display: flex) ou Grid (display: grid).

Elle ne change pas l’ordre réel dans le code HTML, mais seulement l’ordre visuel des éléments.

Propriété détaillée

order : définit la position visuelle de l’élément dans un conteneur flex ou grid.
Valeur par défaut : 0. Les éléments sont affichés dans l’ordre du HTML.

Valeurs possible

Voici les valeurs les plus courantes pour order :

Valeur	Exemple	Description
Nombre entier	`order: 1;`	Plus le nombre est élevé, plus l’élément apparaît après les autres.
Nombre négatif	`order: -1;`	Permet d’afficher un élément avant les autres.
0	`order: 0;`	Valeur par défaut : l’ordre suit celui du HTML.

Exemple

<div class="flex-order">
<div class="item" id="one">1 (order 1)</div>
<div class="item" id="two">2 (order -1)</div>
<div class="item" id="three">3 (order par défaut)</div>
</div>

<div class="flex-order"><div class="item" id="one">1 (order 1)</div><div class="item" id="two">2 (order -1)</div><div class="item" id="three">3 (order par défaut)</div></div>

.flex-order {
    display: flex;
    gap: 10px;
}
.item {
    background-color: #ccc;
    padding: 10px;
    margin-right: 10px;
}
#two {
    order: -1;
}
#one {
    order: 1;
}

.flex-order {    display: flex;    gap: 10px;}.item {    background-color: #ccc;    padding: 10px;    margin-right: 10px;}#two {    order: -1;}#one {    order: 1;}

Aperçu du résultat

1 (order 1)

2 (order -1)

3 (order 0)

Remarques

Changer l’ordre visuel peut perturber l’utilisateur si l’ordre logique n’est pas cohérent.
order est très utilisé pour inverser des colonnes en mobile (ex. : image au-dessus du texte).
Dans un conteneur flex, tous les enfants sont affectés par l’ordre, même si un seul élément est modifié.
En CSS Grid, order existe mais on préfère généralement grid-row et grid-column pour organiser la grille.