Flexbox — Order

Introduction

La propriété order permet de réorganiser visuellement les éléments flexbox sans modifier le HTML. Par défaut, tous les éléments ont un order: 0. Les éléments sont affichés du plus petit au plus grand. Si deux éléments ont le même chiffre attribué, c'est leur position dans le HTML qui détermine leur affichage.

Exemple interactif
<div class="container">
<div class="el1">
Premier
</div>
order:
<div class="el2">
Deuxième
</div>
order:
<div class="el3">
Troisième
</div>
order:
</div>
.container {
  display: flex;
  gap: 0.5rem;
}
.el1 {
}
.el2 {
}
.el3 {
}
La valeur par défaut de order est 0. Les éléments sont triés du plus petit au plus grand. À valeur égale, c'est l'ordre du HTML qui prime.

Cas d'usage

La propriété order est particulièrement utile pour :

  • Responsive design : afficher un élément en premier sur mobile mais en dernier sur desktop
  • Accessibilité : garder un ordre logique dans le HTML pour les lecteurs d'écran, tout en ayant un ordre visuel différent
  • Mise en avant : faire remonter un élément important sans toucher au HTML

Exercice

Zone éditable
<style>
  .container {
    display: flex;
    gap: 0.5rem;
  }
  .sidebar {
    /* 🦊 Cette sidebar doit apparaître À DROITE du main
       sans changer le HTML! */
    background: lightblue;
    padding: 1rem;
    width: 150px;
  }
  main {
    background: lightyellow;
    padding: 1rem;
    flex: 1;
  }
</style>

<div class="container">
<aside class="sidebar">Sidebar</aside>
<main>Contenu principal</main>
</div>
RetourContinuer