La propriété flex-shrink
indique le facteur de rétrécissement d'un élément flexible.
Valeur initiale | 1 |
---|---|
Applicabilité | éléments flexibles, y compris les pseudo-éléments intégrés dans le flux |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Animable | oui, comme un nombre |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.
Syntaxe
flex-shrink: 2; flex-shrink: 0.6; /* Valeurs globales */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset;
Valeurs
<number
>- Un nombre (type
<number>
qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides.
Syntaxe formelle
<number>
Exemples
HTML
<h4>A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .</h4> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>
CSS
#content { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: stretch; align-items: stretch; } .box { flex-shrink: 1; border: 3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); }
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Flexible Box Layout Module La définition de 'flex-shrink' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple | 18.0 (18.0)[1] 32.0 (32.0) [2] |
21.0-webkit | 10 [3] | 12.10 | 8.0-webkit |
Fonctionnalité | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 18.0 (18.0)[1] 32.0 (32.0)[2] |
? | Pas de support | 12.10 | Pas de support |
[1] Jusqu'à Firefox 28, Firefox ne supportait que les boîtes flexibles sur une ligne. De Firefox 18 à 19, il fallait activer la préférence layout.css.flexbox.enabled
.
En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit
à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit
dont la valeur par défaut vaut false
. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true
.
[2] Avant Firefox 32, Gecko ne pouvait pas animer les valeurs qui débutait ou qui finissait à 0
(spécification, démonstration).
[3] Internet Explorer 10 utilise 0
plutôt que 1
comme valeur initiale pour la propriété flex-shrink
. Pour contourner ce bug, il suffit de définir une valeur explicite pour flex-shrink
. Voir Flexbug #6 pour plus d'informations.