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éflex-shrink définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteurflex-shrink.
flex-shrink est généralement utilisé avec les propriétésflex-grow etflex-basis. Elle est souvent définie grâce à la propriété raccourcieflex.
Exemple interactif
flex-shrink: 0;flex-shrink: 1;flex-shrink: 2;<section> <div>I shrink</div> <div>Item Two</div> <div>Item Three</div></section>.default-example { border: 1px solid #c5c5c5; width: auto; max-height: 300px; display: flex;}.default-example > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: 300px;}Pour plus d'informations, voir la pageUtiliser les boîtes flexibles (flexbox) CSS.
Syntaxe
/* Valeurs numériques *//* Type <number> */flex-shrink: 2;flex-shrink: 0.6;/* Valeurs globales */flex-shrink: inherit;flex-shrink: initial;flex-shrink: unset;La propriétéflex-shrink est définie grâce à une valeur de type<number>.
Valeurs
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 spécifié |
| Type d'animation | unnombre |
Syntaxe formelle
flex-shrink =
<number [0,∞]>
Exemples
HTML
<p>A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.</p><div> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div></div>CSS
#content { display: flex; width: 500px;}#content div { flex-basis: 120px; border: 3px solid rgba(0, 0, 0.2);}.box { flex-shrink: 1;}.box1 { flex-shrink: 2;}Résultat
Spécifications
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |
Compatibilité des navigateurs
Voir aussi
- Guide sur les boîtes flexibles :Les concepts de bases
- Guide sur les boîtes flexibles :Contrôler les proportions des boîtes flexibles le long de l'axe principal