La flex-growpropriété est une sous-propriété du module Disposition de boîte flexible.
Il définit la capacité d'un élément flexible à croître si nécessaire. Il accepte une valeur sans unité qui sert de proportion. Il dicte la quantité d'espace disponible à l'intérieur du conteneur flexible que l'élément doit occuper.
Par exemple, si tous les éléments sont flex-growdéfinis sur 1, chaque enfant sera défini sur une taille égale à l'intérieur du conteneur. Si vous donniez à l'un des enfants une valeur de 2, cet enfant prendrait deux fois plus d'espace que les autres.
Syntaxe
flex-grow: .flex-item ( flex-grow: 2; )Démo
La démo suivante montre comment l'espace restant est calculé en fonction des différentes valeurs de flex-grow(voir sur CodePen pour une meilleure compréhension).
Tous les éléments ont une flex-growvaleur de 1 sauf le 3ème qui a une flex-growvaleur de 2. Cela signifie que lorsque l'espace disponible est distribué, le 3ème flex-item aura deux fois plus d'espace que les autres.
Prise en charge du navigateur
- (moderne) signifie la syntaxe récente de la spécification (par exemple
display: flex;) - (hybride) signifie une syntaxe non officielle étrange de 2011 (par exemple
display: flexbox;) - (ancien) signifie l'ancienne syntaxe de 2009 (par exemple
display: box;)
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderne) 20- (ancien) | 3.1+ (ancien) | 2-21 (ancien) 22+ (nouveau) | 12.1+ (moderne) | 10+ (hybride) | 2.1+ (ancien) | 3.2+ (ancien) |
Le navigateur Blackberry 10+ prend en charge la nouvelle syntaxe.
Pour plus d'informations sur la façon de mélanger les syntaxes afin d'obtenir le meilleur support du navigateur, veuillez vous référer à cet article (CSS-Tricks) ou à cet article (DevOpera).