Attribut flex-grow CSS

Définition et utilisation

La propriété flex-grow spécifie la quantité de croissance par rapport aux autres éléments élastiques dans le même conteneur.

Remarque :Si l'élément n'est pas un élément élastique, la propriété flex est invalide.

Voir également :

Tutoriel CSS : Boîtes flexibles CSS

Manuel de référence CSS :Propriété flex

Manuel de référence CSS :Propriété flex-basis

Manuel de référence CSS :Propriété flex-direction

Manuel de référence CSS :Propriété flex-flow

Manuel de référence CSS :Propriété flex-shrink

Manuel de référence CSS :Propriété flex-wrap

Manuel de référence HTML DOM :Propriété flexGrow

Exemple

Régler la largeur du deuxième élément élastique pour qu'il soit trois fois plus grand que les autres éléments élastiques :

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

Essayez-le vous-même

Syntaxe CSS

flex-grow : number|initial|inherit;

Valeur de l'attribut

Valeur Description
number Valeur numérique, indiquant la quantité de croissance par rapport aux autres éléments élastiques de ce projet. La valeur par défaut est 0.
initial Sets this property to its default value. See : initial.
inherit Inherits this property from its parent element. See : inherit.

Détails techniques

Valeur par défaut : 0
Héritage : Non
Réalisation des animations : Support. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.flexGrow="5"

Support du navigateur

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en utilisant les préfixes -webkit-, -ms- ou -moz-.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0