Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
flex-shrink
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.
La propriétéCSSflex-shrink définit le facteur de rétrécissement d'un élément flexible. Si la taille de tous les éléments flexibles est supérieure à celle du conteneur flexible,les éléments flexibles peuvent rétrécir pour s'adapter selon leur valeurflex-shrink.L'espace négatif libre de chaque ligne flexible se répartit entre les éléments flexibles de la ligne ayant une valeurflex-shrink supérieure à0.
Note :Il est recommandé d'utiliser le raccourciflex avec une valeur clé commeauto ouinitial plutôt que de définirflex-shrink seul. Lesvaleurs avec un mot-clé correspondent à des combinaisons fiables deflex-grow,flex-shrink etflex-basis, ce qui aide à obtenir les comportements flex couramment recherchés.
Exemple interactif
flex-shrink: 0;flex-shrink: 1;flex-shrink: 2;<section> <div>Je rétrécis</div> <div>Élément Deux</div> <div>Élément Trois</div></section>.default-example { border: 1px solid #c5c5c5; width: auto; max-height: 300px; display: flex;}.default-example > div { background-color: rgb(0 0 255 / 0.2); border: 3px solid blue; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: 300px;}Syntaxe
/* Valeurs de type <number> */flex-shrink: 2;flex-shrink: 0.6;/* Valeurs globales */flex-shrink: inherit;flex-shrink: initial;flex-shrink: revert;flex-shrink: revert-layer;flex-shrink: unset;Valeurs
La propriétéflex-shrink est définie à l'aide d'un nombre (<number>) unique.
Description
La propriétéflex-shrink définit le facteur de rétrécissement, qui détermine dans quelle mesure l'élément flexible va rétrécir par rapport aux autres éléments flexibles du conteneur lorsque l'espace négatif libre est réparti.
Cette propriété intervient lorsque le navigateur calcule les valeurs de base de flexibilité des éléments flexibles et constate qu'elles sont trop grandes pour tenir dans le conteneur flexible. Tant que le facteur de rétrécissement est positif, les éléments rétrécissent afin de ne pas déborder du conteneur.
La propriétéflex-grow permet de répartir l'espace libre positif disponible proportionnellement au facteur d'agrandissement de chaque élément, en ne tenant compte que de la valeur de la propriétéflex-grow. La propriétéflex-shrink gère la suppression de l'espace négatif libre pour que les boîtes tiennent dans leur conteneur sans déborder. Supprimer de l'espace est un peu plus complexe qu'en ajouter. Le facteur de rétrécissement est multiplié par la taille de base flexible ; cela répartit l'espace négatif en proportion de la capacité de rétrécissement de l'élément. Cela évite que les petits éléments rétrécissent à0px avant qu'un élément plus grand ne soit visiblement réduit.
En général,flex-shrink s'utilise avec les propriétésflex-grow etflex-basis. Dans le raccourciflex, le facteur de rétrécissement est toujours le second nombre (<number>). Si le raccourci ne contient qu'une seule valeur numérique, cette valeur est considérée comme celle deflex-grow.
Définition formelle
| Valeur initiale | 1 |
|---|---|
| Applicabilité | éléments flexibles, y compris les pseudo-éléments intégrés dans le flux |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | unnombre |
Syntaxe formelle
flex-shrink =
<number [0,∞]>
Exemples
Définir le facteur de rétrécissement d'un élément flexible
Cet exemple montre comment l'espace négatif libre est réparti selon le facteur de rétrécissement de l'élément. Il inclut cinq éléments flexibles dont la valeurflex-shrink est supérieure à 0, et dont la largeur totale dépasse celle du conteneur flexible parent.
HTML
<div> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div></div>CSS
Chaque élément flexible reçoit une largeurwidth de200px. Comme la propriétéflex-basis a pour valeur par défautauto, la base de flexibilité de chaque élément est200px. Cela donne aux éléments flexibles une largeur totale de1000px, soit le double de celle du conteneur. Tous les éléments flexibles sont rendus réductibles, avec des valeursflex-shrink supérieures à0. Les deux derniers éléments ont des valeurs deflex-shrink plus élevées, ils rétréciront donc davantage.
#content { display: flex; width: 500px;}#content div { width: 200px;}.box1,.box2,.box3 { flex-shrink: 1;}.box4 { flex-shrink: 1.5;}.box5 { flex-shrink: 2;}#content { margin: 5px;}div { font-family: monospace; outline: 1px solid; line-height: 4em; text-align: center;}.box1 { background-color: red;}.box2 { background-color: lightblue;}.box3 { background-color: yellow;}.box4 { background-color: lightsalmon;}.box5 { background-color: lightgreen;}Résultat
Les éléments flexibles ne débordent pas de leur conteneur car ils peuvent rétrécir : les500px d'espace négatif libre sont répartis entre les cinq éléments selon leurs valeursflex-shrink. Les trois premiers éléments ont la valeurflex-shrink: 1. D a la valeurflex-shrink: 1.5 et E a la valeurflex-shrink: 2. La largeur finale de D et E est inférieure à celle des autres, E étant plus petit que D.
Spécifications
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |