flex-shrink |
Rétrécir enveloppe |
| CSS3 |
|
Syntaxe
|
flex-shrink: nombre|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| nombre |
Ce paramètre permet d'indiquer de combien le nombre d'items doit diminuer par rapport au reste des éléments flexibles. La valeur par défaut est 1. |
| 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 comment l'item doit être relativement rétrécie dans le reste des items flexible à l'intérieur du même conteneur.
Remarques
- Définition et rôle de la propriété : La propriété flex-shrink détermine comment un élément flexible doit réagir lorsque l'espace disponible dans son
conteneur devient insuffisant pour tous les éléments. Elle définit la capacité de l'élément à se réduire, avec une valeur par défaut de 1, ce qui signifie que l'élément peut
rétrécir pour occuper moins d'espace si nécessaire.
- Valeur par défaut : Par défaut, flex-shrink a une valeur de 1, ce qui permet à l'élément de se réduire proportionnellement lorsque l'espace dans le
conteneur est insuffisant. Une valeur de 0 signifie que l'élément ne se réduira pas, peu importe la quantité d'espace manquant.
- Interaction avec flex-grow et flex-basis : Comme pour la propriété flex-grow, flex-shrink fonctionne en combinaison avec flex-basis.
Tandis que flex-grow contrôle l'expansion des éléments lorsque de l'espace est disponible, flex-shrink gère leur réduction lorsque l'espace est restreint. Ces
propriétés permettent de créer des mises en page flexibles et dynamiques.
- Comportement avec plusieurs éléments : Si plusieurs éléments dans un conteneur flex ont des valeurs de flex-shrink différentes, ceux avec des valeurs
plus élevées rétréciront davantage lorsque l'espace disponible est réduit. Cela permet d'obtenir des mises en page plus équilibrées où certains éléments sont plus susceptibles de
se contracter que d'autres.
- Réduction d'éléments en fonction de leur contenu : flex-shrink peut être utile pour gérer les éléments dont le contenu peut dépasser la taille du conteneur.
Par exemple, si un élément contient une image ou un texte de taille variable, la réduction de cet élément peut empêcher le débordement du conteneur, améliorant ainsi la
réactivité de la mise en page.
- Impact sur les éléments avec taille fixe : Si un élément a une taille fixe, définie par width ou height, la propriété flex-shrink peut ne
pas avoir d'effet visible, car l'élément ne sera pas redimensionné. Cependant, dans un conteneur flex, la taille des autres éléments pourrait être modifiée en fonction de
la valeur de flex-shrink pour maintenir la répartition de l'espace.
- Comportement avec l'espace négatif : Lorsque l'espace disponible est insuffisant, la propriété flex-shrink permet de distribuer l'espace négatif entre les
éléments. Les éléments ayant des valeurs plus élevées pour flex-shrink seront réduits plus que ceux ayant des valeurs inférieures. Cela peut conduire à des éléments
extrêmement réduits si l'espace est limité et que flex-shrink est élevé.
- Optimisation des performances en cas de réduction importante : Lorsqu'un grand nombre d'éléments dans un conteneur flex ont des valeurs élevées pour
flex-shrink, cela peut entraîner une réduction significative de leurs tailles. Dans des mises en page complexes ou à forte densité d'éléments, cela peut affecter les
performances visuelles. Il est donc conseillé de gérer soigneusement la valeur de flex-shrink pour éviter des rétrécissements excessifs ou des comportements imprévus.
Dernière mise à jour : Dimanche, le 20 décembre 2015
