Propriété CSSFlexbox

flex-shrink

Détermine à quel point un élément rétrécit quand la place manque dans le conteneur.

Valeur initiale: 1
Héritée: Non
Animable: oui, en tant que nombre
S’applique à: éléments flex
JavaScript: element.style.flexShrink = "0"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user .avatar {
  flex-shrink: 0;
}

HTML de l’exemple

<div class="user stage" style="width: 260px;">
  <span class="avatar box" style="width: 44px; height: 44px; border-radius: 99px; padding: 0;">LD</span>
  <span>Léa Dupont, experte en Flexbox et autrice de trois projets de validation</span>
</div>

Aperçu

Définition et utilisation

La propriété flex-shrink fonctionne à l’inverse de flex-grow. Quand les éléments sont ensemble plus larges que le conteneur, chacun cède une part de sa largeur proportionnellement à ce nombre. Par défaut, tous ont 1, donc ils rétrécissent de façon égale.

La valeur 0 protège l’élément contre le rétrécissement. C’est utile pour les icônes, les avatars, les boutons et les étiquettes, qui doivent garder leur taille pendant que le texte à côté se resserre.

Les éléments ne rétrécissent pas en dessous de la largeur minimale de leur contenu (le mot le plus long). Pour aller plus loin, réglez min-width: 0.

Syntaxe

flex-shrink: <nombre>;

Valeurs

1
Tous les éléments rétrécissent de façon égale, car ils ont la valeur par défaut 1.
0
L’élément 2 garde ses 120px complets, seuls les autres rétrécissent.
3
L’élément 2 cède trois fois plus de place que les autres.

Valeur	Description
1	Tous les éléments rétrécissent de façon égale, car ils ont la valeur par défaut 1.
0	L’élément 2 garde ses 120px complets, seuls les autres rétrécissent.
3	L’élément 2 cède trois fois plus de place que les autres.

Valeurs en pratique

Tous les éléments rétrécissent de façon égale, car ils ont la valeur par défaut 1.

.target { flex-shrink: 1; }

L’élément 2 garde ses 120px complets, seuls les autres rétrécissent.

.target { flex-shrink: 0; }

L’élément 2 cède trois fois plus de place que les autres.

.target { flex-shrink: 3; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Les icônes et les avatars à côté d’un texte devraient presque toujours avoir flex-shrink: 0, sinon ils s’écrasent en ovale.
Si un texte long dans un élément flex ne veut ni passer à la ligne ni se tronquer, ajoutez-lui min-width: 0.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours