La propriété flex-shrink
définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur flex-shrink
.
flex-shrink
est généralement utilisé avec les propriétés flex-grow
et flex-basis
. Elle est souvent définie grâce à la propriété raccourcie flex
.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à 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
<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. La valeur par défaut est1
.
Syntaxe formelle
<number>
Exemples
HTML
<p>A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.</p> <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>
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
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-shrink | Chrome
Support complet
29
| Edge
Support complet
12
| Firefox
Support complet
20
| IE
Support complet
10
| Opera
Support complet
12.1
| Safari
Support complet
9
| WebView Android
Support complet
4.4
| Chrome Android
Support complet
29
| Firefox Android
Support complet
20
| Opera Android
Support complet
12.1
| Safari iOS
Support complet
9
| Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Compatibilité inconnue
- Compatibilité inconnue
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
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