La propriété flex-shrink indique le facteur de rétrécissement d'un élément flexible.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.
Syntaxe
/* Valeurs numériques */ /* Type <number> */ flex-shrink: 2; flex-shrink: 0.6; /* Valeurs globales */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset;
La propriété flex-shrink est définie grâce à une valeur de type <number>.
Valeurs
- 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 {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid rgba(0,0,0.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 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. |
| 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é |
| Type d'animation | un nombre |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 21 -webkit- | 12 12 -webkit- | 49 -webkit- 18 — 204 | 105 | 12.1 15 -webkit- | 8 -webkit- |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | ? | ? | Oui Oui -webkit- | 49 -webkit- 18 — 204 | 12.1 15 -webkit- | ? | ? |
1. Since Firefox 28, multi-line flexbox is supported.
2. Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
3. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
4. From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
5. Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.
Voir aussi
- Guide sur les boîtes flexibles : Les concepts de bases
- Guide sur les boîtes flexibles : Contrôler les proportions des boîtes flexibles le long de l'axe principal