Attribut flex-shrink CSS
Définition et utilisation
La propriété flex-shrink est fixée dans le même conteneur, la réduction du projet par rapport aux autres projets élastiques.
Remarque :Si l'élément n'est pas un élément élastique, la propriété flex est invalide.
Voir également :
Tutoriel CSS : Cadre élastique CSS
Guide CSS :Propriété flex
Guide CSS :Propriété flex-basis
Guide CSS :Propriété flex-direction
Guide CSS :Propriété flex-flow
Guide CSS :Propriété flex-grow
Guide CSS :Propriété flex-wrap
Guide HTML DOM :Propriété flexShrink
Exemple
Réduire le deuxième élément élastique trois fois par rapport aux autres éléments :
div:nth-of-type(2) {
flex-shrink: 3;
}
Syntaxe CSS
flex-shrink: number|initial|inherit;
Valeur de l'attribut
| Valeur | Description |
|---|---|
| number | Nombre, qui détermine la réduction du projet par rapport aux autres projets élastiques. La valeur par défaut est 1. |
| initial | Set this property to its default value. See initial. |
| inherit | Inherits this property from its parent element. See inherit. |
Détails techniques
| Valeur par défaut : | 1 |
|---|---|
| Héritage : | Non |
| Création d'animation : | Pris en charge. Voir :Propriétés liées aux animations. |
| Version : | CSS3 |
| Syntaxe JavaScript : | object.style.flexShrink="5" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur prenant en charge cette propriété.
Les nombres avec -webkit- ou -moz- indiquent la première version utilisant le préfixe.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
