Propriété CSS flex-grow
Exemple
Laissez le deuxième élément flexible devenir trois fois plus large que le reste :
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
Définition et utilisation
La flex-grow
propriété spécifie la croissance de l'élément par rapport au reste des éléments flexibles à l'intérieur du même conteneur.
Remarque : Si l'élément n'est pas un élément flexible, la flex-grow
propriété n'a aucun effet.
Valeur par défaut: | 0 |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.flexGrow="5" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
flex-grow | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Syntaxe CSS
flex-grow: number|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
number | A number specifying how much the item will grow relative to the rest of the flexible items. Default value is 0 | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Pages connexes
Tutoriel CSS : Boîte flexible CSS
Référence CSS : propriété flex
Référence CSS : propriété flex-basis
Référence CSS : propriété flex-direction
Référence CSS : propriété flex-flow
Référence CSS : propriété flex-shrink
Référence CSS : propriété flex-wrap
Référence HTML DOM : propriété flexGrow