w3docs logo

Propriété CSS flex-shrink

La propriété flex-shrink définit le facteur de rétrécissement d'un élément flexible relativement au reste des éléments du conteneur flex. Si la taille des éléments est supérieure à celle du conteneur, les éléments rétrécissent pour tenir dans le conteneur flex. Quand la propriété flex-shrink n'est pas compris dans la déclaration raccourcie flex, la valeur est initialement définie à 1. S'il n'y a pas des éléments flexibles, la propriété flex-shrink n'aura aucun effet.

Le facteur flex-shrink est multiplié par flex-basis quand l'espace négatif est distribué.
Valeur initiale 1
Appliquée à Éléments flex, y compris pséudo-éléments entrants.
Héritée Non.
Animable Oui. Les éléments sont animables.
Version CSS3
Syntaxe DOM object.style.flexShrink = "4";

Syntaxe

flex-shrink: number | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px dotted #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      .box div {
      -webkit-flex-grow: 1; /* Safari 6.1+ */
      -webkit-flex-shrink: 3; /* Safari 6.1+ */
      -webkit-flex-basis: 100px; /* Safari 6.1+ */
      flex-grow: 1;
      flex-shrink: 3;
      flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
      -webkit-flex-shrink: 7; /* Safari 6.1+ */
      flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété flex-shrink</h2>
    <div class="box">
      <div style="background-color: #eee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color :#ccc;"></div>
      <div style="background-color: #666;"></div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
number Définit le facteur de rétrécissement d'un élément flexible relativement aux éléments du même conteneur. La valeur initiale est 1.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
29.0+
21-28 -webkit- 		28.0+ 9.0+
6.1-8.0 -webkit- 		12.1+

Pratiquez vos connaissances

Qu'est-ce que la propriété CSS 'flex-shrink' fait?
Trouvez-vous cela utile?