Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

box-ordinal-group

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et a été remplacée dans une version plus récente de la spécification. Voir la page Utiliser les boîtes flexibles CSS pour plus d'informations à propos du standard actuel.

La propriété CSS box-ordinal-group permet d'affecter les éléments fils d'une boîte flexible à un groupe numéroté.

Les groupes ordinaux peuvent être utilisés avec la propriété box-direction afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque la valeur calculée de box-direction est normal, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.

Syntaxe

css
/* Valeurs de type <integer> */
box-ordinal-group: 1;
box-ordinal-group: 5;

/* Valeurs globales */
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;

La propriété box-ordinal-group est définie comme tout entier positif (<integer>).

Définition formelle

Valeur initiale1
Applicabilitéles éléments fils des éléments de boîte
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

box-ordinal-group = 
<integer>

<integer> =
<number-token>

Exemples

Utilisation simple

Dans d'anciennes versions de la spécification box-ordinal-group était incluse pour permettre de modifier l'ordre d'affichage des enfants flexibles à l'intérieur d'un conteneur flexible.

css
article:nth-child(1) {
  -webkit-box-ordinal-group: 2
  -moz-box-ordinal-group: 2
  box-ordinal-group: 2
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1
  -moz-box-ordinal-group: 1
  box-ordinal-group: 1
}

La propriété équivalente qui remplace celle-ci est order.

Spécifications

Cette propriété ne fait partie d'aucun standard.

Compatibilité des navigateurs

Voir aussi