Propriété CSS flex-shrink

La propriété flex-shrink spécifie de combien l'élément peut se rétrécir par rapport au reste des éléments du conteneur flex. Si la taille des éléments est supérieure à celle du conteneur, les éléments se rétrécissent pour s'adapter au conteneur flex. Lorsque la propriété flex-shrink n'est pas incluse dans la déclaration raccourcie flex, la valeur est définie par défaut à 1. S'il n'y a pas d'éléments flexibles, la propriété flex-shrink n'aura aucun effet.

La propriété flex-shrink est l'une des propriétés CSS3.

INFO

Le facteur flex-shrink est multiplié par la flex-basis (ou la taille du contenu de l'élément si flex-basis est auto) lors de la distribution de l'espace négatif.

Valeur initiale	1
S'applique à	Éléments flex, y compris les pseudo-éléments en flux.
Héritée	Non.
Animable	Oui. Les éléments sont animables.
Version	CSS3
Syntaxe DOM	object.style.flexShrink = "4";

Syntaxe

Syntaxe de la propriété CSS flex-shrink

css

flex-shrink: number | initial | inherit;

Exemple de la propriété flex-shrink :

Exemple de la propriété CSS flex-shrink avec une valeur numérique

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px dotted #666666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 3;
        flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
        flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS flex-shrink Property

Valeurs

Valeur	Description	Tester
number	Spécifie de combien l'élément peut se rétrécir par rapport au reste des éléments flexibles du même conteneur. La valeur par défaut est 1.	Tester »
initial	Définit la propriété à sa valeur par défaut.	Tester »
inherit	Hérite de cette propriété depuis son élément parent.

Pratique

Quelle est la fonction de la propriété 'flex-shrink' en CSS ?

Elle définit la capacité d'un élément flex à grandir si nécessaire.Elle spécifie l'alignement entre les lignes à l'intérieur d'un conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible.Elle définit la capacité d'un élément flex à se rétrécir si nécessaire.Elle vous permet de contrôler la mise en page d'un conteneur flex le long de l'axe transversal.Elle détermine l'ordre dans lequel les éléments flex sont affichés et mis en page dans le conteneur flex.

Propriété CSS flex-shrink ​

Syntaxe ​

Exemple de la propriété flex-shrink : ​

Résultat ​