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 facteur flex-shrink.
flex-shrink est généralement utilisé avec les propriétés flex-grow et flex-basis. Elle est souvent définie grâce à la propriété raccourcie flex.
Exemple interactif
flex-shrink: 0;
flex-shrink: 1;
flex-shrink: 2;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">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 page Utiliser 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 | un nombre |
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 id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">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
Chargement...
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