order
Change l’ordre d’affichage d’un élément dans un conteneur flex ou grid.
- Valeur initiale
0- Héritée
- Non
- Animable
- oui, en tant que nombre entier
- S’applique à
- éléments flex et éléments grid
- JavaScript
element.style.order = "-1"
Exemple
#.layout {
display: flex;
flex-direction: column;
}
.layout .notice {
order: -1;
}<div class="layout stage" style="gap: 8px;">
<p style="margin: 0">Contenu de la leçon sur Flexbox.</p>
<p class="notice" style="margin: 0; color: #fbbf24;">Attention : nouvelle version de la leçon !</p>
</div>Définition et utilisation
#La propriété order accepte un nombre entier. Les éléments s’affichent de la plus petite à la plus grande valeur, et en cas d’égalité, c’est l’ordre du code qui décide. Par défaut, tous ont 0.
Vous pouvez ainsi réorganiser les éléments uniquement à l’affichage, par exemple déplacer un panneau latéral au-dessus du contenu sur téléphone, ou mettre en avant une carte en la plaçant au début.
L’ordre de lecture par les technologies d’assistance et la navigation avec la touche Tab ne change pas. De grands réarrangements peuvent donc désorienter les utilisateurs du clavier.
Syntaxe
#order: <nombre entier>;Valeurs
#Valeurs en pratique
#0
.target { order: 0; }-1
.target { order: -1; }1
.target { order: 1; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si l’ordre compte pour le sens du contenu, changez-le dans le code HTML, pas avec
order. - Utilisez de petits nombres, par exemple -1, 0 et 1. Il est alors plus facile de suivre ce qui va où.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.