Propriété order en CSS
La propriété order est utilisée pour spécifier l'ordre d'un élément flexible à l'intérieur du conteneur flex ou grid.
La propriété order fait partie du module Flexible Box Layout.
La propriété order est l'une des propriétés CSS3.
INFO
Si l'élément n'est pas un élément flexible, la propriété order ne fonctionne pas.
Préoccupations en matière d'accessibilité
La propriété order crée une déconnexion entre l'affichage visuel du contenu et l'ordre du DOM. Le réarrangement visuel ne modifie pas l'ordre du DOM, ce qui impacte la navigation par lecteur d'écran. Les utilisateurs dépendant de technologies d'assistance (par exemple, les lecteurs d'écran) percevront l'ordre DOM original, et non la mise en page réarrangée visuellement.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Aux éléments flex et aux éléments grid. |
| Héritée | Non. |
| Animable | Non. La propriété order est discrète et non animable. |
| Version | CSS3 |
| Syntaxe DOM | Object.style.order = "4"; |
Syntaxe
Syntaxe CSS de order
order: number | initial | inherit;Exemple de la propriété order :
Exemple de code CSS pour order
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 400px;
height: 200px;
border: 1px solid #000;
display: flex;
}
#example div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 30px;
font-family: sans-serif;
}
div#blue {
order: 2;
}
div#green {
order: 3;
}
div#grey {
order: 1;
}
div#yellow {
order: 4;
}
</style>
</head>
<body>
<h2>Order property example</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>Résultat
Exemple de la propriété order appliquée à la classe container :
Exemple flexbox CSS pour order
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
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>Order property</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>Dans les exemples mentionnés ci-dessus, la propriété order définit l'ordre des éléments flex ou grid. Selon les besoins de l'utilisateur, chaque élément se voit attribuer un nombre.
Valeurs
| Valeur | Description |
|---|---|
| number | Définit l'ordre de l'élément flex ou grid dans le conteneur. La valeur par défaut est 0. |
| initial | Fait utiliser à la propriété sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'order' ?