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.

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 est 1.

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
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