Définit une mesure scalaire dans une plage connue (une jauge)
La propriété order de CSS
La propriété CSS order est un élément clé de la mise en page de Flexbox. Elle permet de spécifier l'ordre dans lequel les éléments flexibles sont affichés dans un conteneur flex. Dans cet article, nous allons examiner de plus près la définition de la propriété order, sa syntaxe, les valeurs possibles, donner des exemples pratiques d'utilisation et des conseils et astuces pour son utilisation.
Définition de la propriété css order
La propriété CSS order est utilisée pour spécifier l'ordre dans lequel les éléments flexibles sont affichés dans un conteneur flex. Elle affecte l'ordre dans lequel les éléments sont affichés à l'écran, sans modifier leur ordre dans le code HTML. L'ordre par défaut est de 0 pour tous les éléments flexibles, ce qui signifie qu'ils sont affichés dans l'ordre dans lequel ils sont définis dans le code HTML.Syntaxe générale de la propriété css order
La syntaxe générale de la propriété order est la suivante :
flex-item { order: valeur; }
| Valeurs par défaut | 0 |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.order="2" |
La propriété order est appliquée aux éléments enfants du conteneur flex, également connus sous le nom d'éléments flexibles.
Valeurs possibles
La valeur de la propriété order est un entier relatif qui peut être positif, négatif ou zéro. Les éléments sont affichés dans l'ordre croissant des valeurs de la propriété order. Si deux éléments ont la même valeur de order, l'ordre d'affichage est déterminé par l'ordre dans lequel ils apparaissent dans le code HTML.
Exemple pratique d'utilisation
Prenons l'exemple suivant :
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
Si nous appliquons le code CSS suivant :
.container { display: flex; }
.item:nth-child(1) { order: 4; }
.item:nth-child(2) { order: 3; }
.item:nth-child(3) { order: 2; }
.item:nth-child(4) { order: 1; }
Les éléments seront affichés dans l'ordre suivant :
4 3 2 1
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 29.0 21.0 -webkit- | 11 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17 |
Conseils et astuces d'utilisation de la propriété order
La propriété order peut être utile pour réorganiser la disposition des éléments flexibles. Voici quelques astuces pour son utilisation : • Évitez d'utiliser des valeurs de order trop élevées ou trop basses, car cela peut rendre le code difficile à maintenir et à comprendre. • Vous pouvez utiliser des nombres négatifs pour déplacer les éléments vers l'arrière. • Gardez à l'esprit que la propriété order ne modifie pas l'ordre des éléments dans le code HTML, mais seulement leur ordre d'affichage. • Utilisez la propriété order avec prudence, car elle peut affecter la lisibilité de votre code HTML.Conclusion
La propriété CSS order est un élément clé de la mise en page de Flexbox. Elle permet de spécifie l'ordre dans lequel les éléments flexibles sont affichés dans un conteneur flex, sans modifier leur ordre dans le code HTML. La syntaxe générale de la propriété order est simple et la valeur de cette propriété est un entier relatif. Elle peut être utilisée pour réorganiser la disposition des éléments flexibles.
Lorsque vous utilisez la propriété order, il est important de garder à l'esprit qu'elle affecte uniquement l'ordre d'affichage des éléments, pas leur ordre dans le code HTML. Vous devez également faire preuve de prudence lors de l'utilisation de cette propriété, car des valeurs incohérentes peuvent rendre votre code difficile à comprendre et à maintenir.
En conclusion, la propriété order est un outil utile pour la mise en page de Flexbox, mais il est important de comprendre comment l'utiliser correctement pour éviter les problèmes. Avec les conseils et astuces présentés dans cet article, vous devriez être en mesure d'utiliser efficacement la propriété order dans vos projets CSS.
Autre exemple : Permuter l’ordre des éléments avec display: table et associé
L’une des caractéristiques de l' Flexbox display: flex est qu'il vous permet de modifier l’ordre avec la propriété order.
Mais cette possibilité n’est vraiment pas nouvelle. Dans la structure des tableaux, soit en tant qu’élément Html, soit via le Css et la propriété associée display: table qui est est déjà présent dès sa conception.
Certains éléments du tableau , tels que le titre (légende ou ) ainsi que l'en-tête ou le pied de page, peuvent être affichés à l'écran à un endroit différent de celui du document.
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété CSS order </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Megrim|Roboto+Slab:300);
* {margin: 0; padding: 0; position: relative; transition: .3s linear;}
*, *:before, *:after {box-sizing: inherit;}
html {
background: #f5f5f5;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
}
article {
background: #fff;
width: 70vw;
max-width: 900px;
margin: auto;
box-shadow: 0 0 3px rgba(0,0,0,.4);
}
h1 {
background: rgba(236,72,127,0);
font-family: Megrim;
font-weight: 300;
text-align: center;
font-variant: small-caps;
color: #777;
}
h1 {font-size: 3rem;}
header {font-size: 1rem;}
img {
width: 100%;
display: block;
}
p {
font-family: Roboto Slab;
letter-spacing: 1px;
font-size: 1.3rem;
line-height: 1.5;
padding: 1rem;
}
@media only screen and (min-width:601px) {
h2 {
position: absolute;
top: 1rem;
right: 1rem;
color: #fff;
font-size: 7vw;
border-bottom: 2px solid #ddd;
}
header {
position: absolute;
top: 12vw;
right: 1rem;
color: #bbb;
text-align: right;
}
header span {
display: block;
line-height: 1.5;
}
}
@media only screen and (max-width:600px) {
article {
background: #0A2C4F;
display: table;
table-layout: fixed;
width: 90vw;
color: #000;
/*caption-side: bottom;*/
}
h2 {
background: rgba(236,72,127,1);
display: table-caption;
color: #000;
box-shadow: 0 0 3px rgba(0,0,0,.4);
/*caption-side: bottom;*/
}
header {
background: #333;
display: table-footer-group;
color: #ccc;
text-align: center;
}
header span {
display: table-cell;
width: 50%;
padding: 0 1rem;
line-height: 2;
}
img, p {
display: block;
width: 200%;
}
}
</style>
</head>
<body>
<h1>La propriété CSS order </h1>
<article>
<img src='https://elpoetadelaesquina.files.wordpress.com/2009/03/leon-felipe-1c2ba3.jpg' alt />
<h2>León Felipe</h2>
<header><span>Tábara à Zamora (1884)</span> <span>Mexico (1968)</span></header>
<p>Je pars parce que la terre, le pain et la lumière ne sont plus à moi.<br>
Je reviendrai demain sur le destrier du Vent. <br>
Je reviendrai. Et quand je reviendrai, tu partiras.</p>
</article>
</body>
</html>
Redimensionner la fenêtre de visualisation afin de réorganiser les éléments.
Comme vous pouvez le voir dans le code Html, tout se résume à un élément article qui contient, dans cet ordre, une image suivie d'un titre h2, d'un en-tête header avec 2 span et enfin d'un paragraphe p.
Lorsque l'affichage est supérieur à 600px, tout est affiché en fonction de son apparence dans le code Html. Je ne positionne le h2 et l'en-tête au-dessus de l'image que pour des raisons esthétiques (position : absolute).