box-flex-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 Flexbox pour plus d'informations.
La propriété CSS box-flex-group permet d'affecter un élément fils de la boîte flexible à un groupe.
Les éléments flexibles sont affectés à des groupes. Le premier groupe sera désigné par l'indice 1 et les groupes suivants par 2, 3, et ainsi de suite. Lorsque l'espace restant dans la boîte est réparti, le moteur prend d'abord en compte les éléments du premier groupe et répartit l'espace entre les différents éléments de ce groupe selon leurs flexibilités relatives. Une fois l'espace augmenté au maximum, le moteur passe au groupe qui suit en utilisant l'espace restant et ainsi de suite. Si, une fois l'ensemble des groupes traités, il y a encore de l'espace, celui-ci est réparti grâce à la propriété box-pack.
Si la boîte dépasse une fois que l'espace pour l'élément fils a été calculé, l'espace est alors retiré (chaque groupe est examiné dans l'ordre et l'espace est retiré selon la flexibilité de chaque élément). Les éléments ne sont pas réduits en deçà de leurs largeurs minimales.
Syntaxe
/* Valeur de type <integer> */
box-flex-group: 1;
box-flex-group: 5;
/* Valeurs globales */
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;
Cette propriété est définie avec un entier positif (<integer>).
Définition formelle
| Valeur initiale | 1 |
|---|---|
| Applicabilité | les éléments fils dans le flux des éléments de boîte |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
box-flex-group =
<integer>
<integer> =
<number-token>
Exemples
Utilisation simple
Dans la spécification originale, box-flex-group pouvait être utilisée afin d'affecter des enfants flexibles à différents groupes parmi lesquels répartir l'espace flexible :
article:nth-child(1) {
-webkit-box-flex-group: 1;
}
article:nth-child(2) {
-webkit-box-flex-group: 2;
}
Cette propriété a uniquement été prise en charge dans les navigateurs WebKit avec un préfixe. Les versions suivantes de la spécification ne contiennent pas cette propriété. La distribution de l'espace à l'intérieur d'un conteneur flexible est désormais gérée par flex-basis, flex-grow et flex-shrink.
Spécifications
Cette propriété ne fait partie d'aucun standard.
Compatibilité des navigateurs
Voir aussi
- La propriété
flex - La propriété
flex-basis - La propriété
flex-grow - La propriété
flex-shrink