Avertissement : Cette propriété était décrite dans les premières versions de la spécification pour les boîtes flexibles (flexbox) et a été remplacée dans les versions suivantes.
Voir la page Flexbox pour plus d'informations.
La propriété box-flex-group permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
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.
| Valeur initiale | 1 |
|---|---|
| Applicabilité | in-flow children of box elements |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Animable | non |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Un entier désignant le groupe */ /* Type <integer> */ box-flex-group: 1; box-flex-group: 5; /* Valeurs globales */ box-flex-group: inherit; box-flex-group: initial; box-flex-group: unset;
Valeurs
<integer>- Un entier positif qui désigne le groupe auquel rattacher l'élément contenu dans la boîte flexible.
Syntaxe formelle
<integer>
Spécifications
Brouillon de travail pour le module des boîtes flexibles (W3C)
Ancienne version de la spécification.
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | (Oui)-webkit | ? | Pas de support | (Oui)-webkit | 1.1-khtml 3.0-webkit |
| Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | ? | ? | ? | Pas de support | ? | 1.0-webkit |