flex-grow |
Pousser l'enveloppe |
CSS3 |
|
Syntaxe
flex-grow: nombre|inherit|initial;
|
Paramètres
Paramètre |
Description |
nombre |
Ce paramètre permet d'indiquer de combien l'élément doit croître par rapport au reste des éléments flexibles. La valeur par défaut est 0. |
inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer combien d'éléments doivent croître par rapport au reste des éléments flexibles à l'intérieur du même conteneur.
Remarques
- Définition et comportement général : La propriété flex-grow détermine la capacité d'un élément flex à croître par rapport aux autres éléments dans
un conteneur flex. Sa valeur est un facteur de croissance, où flex-grow: 0 signifie qu'il ne croîtra pas, tandis qu'une valeur plus grande permet à l'élément d'occuper
plus d'espace disponible.
- Comportement avec d'autres propriétés flex : flex-grow fonctionne en interaction avec flex-shrink et flex-basis dans le modèle de mise en
page Flexbox. Si la somme des valeurs flex-grow des éléments dépasse l'espace disponible, les éléments avec des valeurs plus grandes vont croître davantage.
- Impact sur les dimensions des éléments : Un élément ayant une valeur flex-grow plus élevée va occuper plus d'espace dans le conteneur flex que ceux
ayant des valeurs inférieures. Cela peut être utile pour donner un poids différent aux éléments dans une mise en page réactive.
- Valeur par défaut : Par défaut, la valeur de flex-grow est 0, ce qui signifie que les éléments ne vont pas croître au-delà de leur taille initiale définie par
flex-basis ou leurs dimensions naturelles. Il faut explicitement définir une valeur différente pour qu'un élément se développe.
- Somme de toutes les valeurs flex-grow : Lorsque plusieurs éléments dans un conteneur flex ont des valeurs de flex-grow définies, l'espace disponible
est réparti en fonction de la somme de ces valeurs. Si les éléments ont des valeurs identiques, l'espace sera réparti de manière égale.
- Utilisation dans des mises en page réactives : flex-grow est particulièrement utile dans des mises en page réactives, où l'espace disponible change selon la
taille de l'écran. Par exemple, en utilisant des valeurs différentes pour flex-grow, on peut ajuster dynamiquement la répartition de l'espace entre les éléments.
- Interaction avec les éléments enfants : La propriété flex-grow s'applique à tous les éléments enfants d'un conteneur flex. Cependant, si l'élément enfant a
une largeur ou une hauteur définie explicitement (comme width ou height), cela peut restreindre la manière dont flex-grow fonctionne, sauf si ces dimensions sont
en pourcentage ou définies en fonction de l'espace disponible.
- Compatibilité et optimisation des performances : La propriété flex-grow est largement supportée par les navigateurs modernes, mais pour optimiser les performances
des mises en page complexes, il est parfois conseillé d'éviter un trop grand nombre d'éléments flexibles avec une valeur élevée pour flex-grow, surtout dans des applications avec
des interfaces riches et dynamiques.
Dernière mise à jour : Dimanche, le 20 décembre 2015