Définition de la CSS flex-grow.
La propriété de Flexbox CSS flex-grow
permet de spécifier un facteur d'agrandissement de la taille initiale d'un élément flexible Css sur l'axe principal et par rapport au reste des éléments flexibles Css, lorsque l'espace libre restant au sein du conteneur Flexbox Css est re-distribué.
Vous pouvez faire des tests de paramétrage dans le générateur de code Css de Flexbox.
La propriété de feuille de style flex-grow
CSS peut prendre la valeur de :
- nombre positif, spécifie le facteur d'agrandissement de la hauteur ou longueur suivant la valeur de
flex-direction
. -
0
: n'autorise aucun agrandissement, valeur par défaut.
Conditions d'application de la CSS flex-grow.
La propriété de feuille de style flex-grow
CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont le conteneur Flexbox Css d'éléments "flexibles" et qu'il soit de type display:[inline-]flex
.
La valeur de la CSS flex-grow
peut être mise directement dans la propriété de raccourci CSS flex
.
Héritage des valeurs Css de flex-grow.
Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style flex-grow
Conditions d'animation de flex-grow en CSS3.
La CSS flex-grow
est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.
Règles de syntaxes CSS pour flex-grow.
Comment est calculé l'agrandissement d'un élément flexible Css?
Vous trouverez dans la Faq "Les Flexbox Css" l'explication sur la manière dont est calculé le facteur d'agrandissement, qui va déterminer la taille finale de l'élément flexible Css au sein d'un conteneur Flexbox Css.
La taille finale d'élément flexible Css agrandi est dépendante de :
- la valeur de la propriété
flex-basis
Css qui détermine la taille initiale* à laquelle est ajoutée le surplus d'espace. -
max-width
* oumax-height
* s'il a été spécifié.
Dépend de la valeur de flex-direction
*) Dépend de la valeur de flex-direction
:
-
flex-direction:row*
, alorsflex-basis
augmente la taille sur le "width
". -
flex-direction:column*
, alorsflex-basis
augmente la taille sur le "height
".
Compatibilités navigateurs de la propriété flex-grow
- Détails des versions de la CSS flex-grow
- Propriété
flex-grow
est compatible avec CSS3 et plus.
Votre avis sur la définition flex-grow en CSS
Votez pour la définition CSS flex-grow
- 1/5
- 2/5
- 3/5
- 4/5
- 5/5
Votes: 5 / 5 - 2
votes
Cliquez sur une étoile pour voter.