flex-shrink

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

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

#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

Compatibilité des navigateurs

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