flex-shrink
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.
Exemple interactif
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
flex-shrink =
<number [0,∞]>
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 |
| Valeur calculée | comme spécifié |
| Type d'animation | un nombre |
Compatibilité des navigateurs
BCD tables only load in the browser
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