Définition de la CSS flex-shrink.
La propriété de Flexbox CSS flex-shrink permet de spécifier un facteur de réduction de la taille initiale d'un élément flexible Css sur l'axe principal et par rapport aux autres éléments flexibles Css, quand il n'y a pas assez de place pour mettre l'ensemble des éléments flexibles Css dans l'élément conteneur Flexbox Css.
Vous pouvez faire des tests de paramétrage dans le générateur de code Css de Flexbox.
flex-shrink :flex-shrink : 1;
flex-shrink : 0.5;
flex-shrink : 10;La propriété de feuille de style flex-shrink CSS peut prendre la valeur de :
- nombre positif : spécifie le facteur de réduction de la hauteur* ou longueur* suivant la valeur de
flex-direction.1est la valeur par défaut. -
0: n'autorise aucune réduction.
Exemple de code flex-shrink CSS
Conditions d'application de la CSS flex-shrink.
La propriété de feuille de style flex-shrink CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont le conteneur Flexbox Css d'éléments flexibles Css et qu'il soit de type display:[inline-]flex.
La valeur de la CSS flex-shrink peut être mise directement dans la propriété de raccourci CSS flex.
Héritage des valeurs Css de flex-shrink.
Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style flex-shrink
Conditions d'animation de flex-shrink en CSS3.
La CSS flex-shrink 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-shrink.
Comment est calculé la réductuion de taille d'un élément flexible?
Vous trouverez dans la Faq "Les Flexbox Css" l'explication sur la manière dont est calculé le facteur de réduction, 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 réduit est dépendante de :
- la valeur de la propriété
flex-basisCss qui détermine la taille initiale* qui va être réduite.. -
min-width* oumin-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-shrinkréduit la taille sur le "width". -
flex-direction:column*, alorsflex-shrinkréduit la taille sur le "height".
Compatibilités navigateurs de la propriété flex-shrink
- Détails des versions de la CSS flex-shrink
- Propriété
flex-shrinkest compatible avec CSS3 et plus.
Votre avis sur la définition flex-shrink en CSS
Votez pour la définition CSS flex-shrink
- 1/5
- 2/5
- 3/5
- 4/5
- 5/5
Votes: 5 / 5 - 2
votes
Cliquez sur une étoile pour voter.