Propriété CSS flex-shrink

La propriété flex-shrink contrôle de combien un élément flex rétrécit par rapport aux autres éléments du même conteneur lorsqu'il n'y a pas suffisamment de place pour tous à leurs tailles préférées. Elle n'a d'effet que lorsque la taille combinée des éléments dépasse celle du conteneur — ce débordement est l'« espace négatif » qui est redistribué en rétrécissant les éléments.

La valeur est un nombre sans unité (un facteur flex), pas une longueur. Un nombre plus élevé signifie qu'un élément cède davantage de sa largeur (ou hauteur, dans une colonne) que ses voisins. La valeur par défaut est 1, donc par défaut tous les éléments flex rétrécissent au même rythme. Définissez-la à 0 pour bloquer un élément à sa flex-basis et l'empêcher de rétrécir.

flex-shrink est la troisième valeur dans le raccourci flex (flex: grow shrink basis) et fait partie des propriétés CSS3.

Info

Lors de la distribution de l'espace négatif, le facteur flex-shrink de chaque élément est multiplié par sa flex-basis (ou, quand flex-basis est auto, par la taille du contenu de l'élément). Cette pondération signifie que les éléments plus grands rétrécissent davantage que les petits même lorsque leurs facteurs de rétrécissement sont égaux — cela évite qu'un petit élément ne se réduise à rien pendant qu'un grand conserve sa taille.

Comment le rétrécissement est calculé

Supposons qu'un conteneur flex fasse 400px de large et contienne deux éléments dont les valeurs flex-basis totalisent 600px — il y a 200px de débordement à absorber. Si les deux éléments ont la même flex-basis de 300px et des facteurs de rétrécissement de 1 et 3, les parts pondérées sont 300×1 = 300 et 300×3 = 900, soit un total de 1200. Chaque élément cède le débordement proportionnellement à sa part :

L'élément A retire 200 × (300 / 1200) = 50px → finit à 250px.
L'élément B retire 200 × (900 / 1200) = 150px → finit à 150px.

Ainsi, l'élément avec flex-shrink: 3 perd trois fois plus de largeur que celui avec flex-shrink: 1. Les deux largeurs finales s'additionnent pour retrouver les 400px du conteneur.

Quand utiliser flex-shrink

Protéger un élément fixe. Donnez à une barre latérale, un logo ou une icône flex-shrink: 0 pour qu'il conserve sa taille pendant que le contenu flexible autour rétrécit.
Prioriser ce qui rétrécit en premier. Augmentez le facteur sur les éléments moins importants pour qu'ils s'effacent avant le contenu principal.
Créer des barres d'outils et des barres de navigation flexibles. Laissez les boutons rétrécir ensemble à mesure que le viewport se réduit au lieu de déborder ou de se replier. | Valeur initiale | 1 | |---|---| | S'applique à | Les éléments flex, y compris les pseudo-éléments dans le flux. | | Hérité | Non. | | Animatable | Oui. Les éléments sont animables. | | Version | CSS3 | | Syntaxe DOM | object.style.flexShrink = "4"; |

Syntaxe

Syntaxe de la propriété CSS flex-shrink

flex-shrink: number | initial | inherit;

Un nombre sans unité définit le facteur flex ; initial le réinitialise à 1 et inherit prend la valeur du parent.

Exemple de la propriété flex-shrink

Dans l'exemple ci-dessous, tous les éléments partent d'une flex-basis de 100px (donc 500px de contenu sont en compétition pour une boîte de 320px). Le deuxième élément a flex-shrink: 7 tandis que les autres ont 3, donc il rétrécit plus de deux fois plus vite et finit le plus étroit.

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

Essayez vous-même »

Résultat

![Propriété CSS flex-shrink](/uploads/media/default/0001/05/b413d578abc6b2c3b0a052506081df9c0183e432.png "CSS flex-shrink property example" =420x)

Empêcher un élément de rétrécir

Définissez flex-shrink: 0 pour maintenir un élément à sa base pendant que ses frères absorbent tout le débordement. Ici, la barre latérale reste à 200px de large et seule la zone de contenu rétrécit :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: flex;
        width: 320px;
        border: 1px dotted #666666;
      }
      .sidebar {
        flex-basis: 200px;
        flex-shrink: 0;        /* never shrinks */
        background-color: #1c87c9;
      }
      .content {
        flex-basis: 200px;
        flex-shrink: 1;        /* shrinks to make room */
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </div>
  </body>
</html>

Les deux bases totalisent 400px dans une boîte de 320px, donc 80px doivent être retirés. Comme la barre latérale refuse de rétrécir, la zone de contenu absorbe l'intégralité des 80px et s'affiche à 120px.

Valeurs

Valeur	Description	Essayer
number	Définit de combien l'élément rétrécira par rapport aux autres éléments flexibles du même conteneur. La valeur par défaut est 1.	Essayer »
initial	Réinitialise la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite de cette propriété depuis son élément parent.

Propriétés associées

flex-shrink fonctionne rarement seule — elle est le pendant des autres propriétés de dimensionnement Flexbox :

flex-grow — de combien un élément grandit pour remplir l'espace supplémentaire (la direction opposée).
flex-basis — la taille initiale de l'élément avant que la croissance ou le rétrécissement soit appliqué.
flex — le raccourci qui définit flex-grow, flex-shrink et flex-basis en une seule fois.
flex-wrap — quand les éléments peuvent passer à une nouvelle ligne au lieu de rétrécir.
flex-direction — si le rétrécissement se produit le long de la ligne (largeur) ou de la colonne (hauteur).

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 à rétrécir si nécessaire.Elle permet de contrôler la disposition 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 disposés dans le conteneur flex.