Propriété CSS flex-shrink
Exemple
Laissez le deuxième flex-item rétrécir trois fois plus que le reste :
div:nth-of-type(2) {
flex-shrink: 3;
}
Définition et utilisation
La flex-shrink
propriété spécifie comment l'élément sera réduit 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-shrink
propriété n'a aucun effet.
Valeur par défaut: | 1 |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.flexShrink="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-shrink | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Syntaxe CSS
flex-shrink: number|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
number | A number specifying how much the item will shrink relative to the rest of the flexible items. Default value is 1 | |
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-grow
Référence CSS : propriété flex-wrap
Référence HTML DOM : propriété flexShrink