CSS3 Méthode d'utilisation et exemple de l'attribut order

L'attribut CSS spécifie l'ordre d'affichage et de mise en page des éléments flexibles dans le conteneur flexible. Les éléments sont alignés en ordre croissant de valeur. Les éléments ayant la même valeur d'ordre sont mis en page dans l'ordre de leur apparition dans le code source.

Le tableau suivant décrit l'utilisation et l'historique des versions de cette propriété, ainsi que la syntaxe d'utilisation de cette propriété dans le script JavaScript.

Syntaxe d'utilisation de order

La syntaxe de cet attribut est la suivante :

order: integer | initial | inherit

Les exemples suivants montrent comment utiliser l'attribut order.

.flex-container {
　　　　border:　2px solid #000;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
}

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cette propriété.

Compatibilité du navigateur

La compatibilité du navigateur pour l'attribut order, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.

Lire la suite

Veuillez consulter les tutoriels suivants :Polices CSS，Unités CSS，Éléments pseudo-CSS。

Propriétés associées: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.