Propriété order et réorganisation visuelle
Modifiez l’ordre visuel des éléments flex sans changer le DOM avec la propriété order.
Propriété order et réorganisation visuelle est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
La propriété order
La propriété order modifie l’ordre visuel des éléments flexibles et des éléments de grille sans modifier la structure du DOM. La valeur par défaut est 0 ; les valeurs supérieures apparaissent plus tard et les valeurs négatives plus tôt.
Principes de order
Les éléments sont affichés de la valeur order la plus faible à la plus élevée. Les éléments ayant la même valeur order apparaissent dans l’ordre du DOM.
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
Valeurs order négatives
Utilisez des valeurs négatives pour placer un élément avant tous les éléments par défaut (order:0) :
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
Réorganiser selon la taille d’écran
Modifiez l’ordre visuel à différents points de rupture sans modifier le HTML :
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
Important : avertissement d’accessibilité
order modifie uniquement l’ordre visuel. Les lecteurs d’écran et la navigation au clavier suivent l’ordre du DOM, et non l’ordre visuel. Pour l’accessibilité, il est essentiel de réorganiser visuellement les éléments tout en conservant le DOM dans un ordre de lecture logique.
Incohérence de l’ordre de tabulation
Si vous réorganisez visuellement les éléments avec order, la mise au point à l’aide de la touche Tab suit l’ordre du DOM, qui peut différer de l’ordre visuel. La navigation devient alors déroutante pour les utilisateurs du clavier. N’utilisez la réorganisation visuelle que si elle ne rompt pas la séquence logique.
Cas d’utilisation légitimes courants
La réorganisation visuelle est acceptable lorsque :
- Les éléments ne font pas partie d’une séquence navigable (ordre décoratif)
- L’ordre visuel correspond à un parcours de lecture naturel différent de l’ordre source pour des raisons d’organisation du code
order avec Flexbox et CSS Grid
La propriété order fonctionne de manière identique avec Flexbox et CSS Grid. Elle contrôle l’ordre au sein de l’algorithme de mise en page, et non celui du DOM.
order avec flex-wrap
Lorsque les éléments passent sur de nouvelles lignes, order détermine quels éléments apparaissent sur chaque ligne et dans quel ordre au sein de celle-ci.
Tout inverser
Pour inverser tous les éléments, utilisez flex-direction: row-reverse ou column-reverse plutôt que de définir des valeurs d’ordre négatives pour chaque élément. Cette approche est plus sémantique et plus simple.
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Animation avec order
Les modifications de order ne peuvent pas être animées en CSS. Si vous avez besoin d’une réorganisation animée, utilisez des transformations ou des animations pilotées par JavaScript, comme Flip.js ou le plugin Flip de GSAP.
Vérification rapide
Pourquoi faut-il utiliser la propriété order avec prudence pour réorganiser des liens de navigation ?
Récapitulatif
order modifie la position visuelle des éléments flex/grid sans toucher au HTML. La valeur par défaut est 0 : les valeurs les plus faibles apparaissent en premier et les plus élevées en dernier. Utilisez cette propriété pour réorganiser les éléments de manière réactive sans modifier la structure du DOM. Vérifiez toujours que l’ordre de navigation au clavier et celui utilisé par les lecteurs d’écran restent logiques lors d’une réorganisation avec order.
Questions Fréquemment Posées
La leçon « Propriété order et réorganisation visuelle » est-elle gratuite ?
Oui — le texte complet de « Propriété order et réorganisation visuelle » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Propriété order et réorganisation visuelle » ?
Modifiez l’ordre visuel des éléments flex sans changer le DOM avec la propriété order. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Propriété order et réorganisation visuelle » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Remplacement de l’alignement des éléments flex avec align-self
- Propriété order et réorganisation visuelle
- Notations abrégées flex
- Mises en page Flexbox courantes : navigation, cartes et objets média