Propriété CSS flex-shrink
La propriété flex-shrink définit le facteur de rétrécissement d'un élément flexible relativement au reste des éléments du conteneur flex. Si la taille des éléments est supérieure à celle du conteneur, les éléments rétrécissent pour tenir dans le conteneur flex. Quand la propriété flex-shrink n'est pas compris dans la déclaration raccourcie flex, la valeur est initialement définie à 1. S'il n'y a pas des éléments flexibles, la propriété flex-shrink n'aura aucun effet.
Le facteur flex-shrink est multiplié par flex-basis quand l'espace négatif est distribué.
Valeur initiale | 1 |
Appliquée à | Éléments flex, y compris pséudo-éléments entrants. |
Héritée | Non. |
Animable | Oui. Les éléments sont animables. |
Version | CSS3 |
Syntaxe DOM | object.style.flexShrink = "4"; |
Syntaxe
flex-shrink: number | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px dotted #666;
display: -webkit-flex; /* Safari */
display: flex;
}
.box div {
-webkit-flex-grow: 1; /* Safari 6.1+ */
-webkit-flex-shrink: 3; /* Safari 6.1+ */
-webkit-flex-basis: 100px; /* Safari 6.1+ */
flex-grow: 1;
flex-shrink: 3;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
-webkit-flex-shrink: 7; /* Safari 6.1+ */
flex-shrink: 7;
}
</style>
</head>
<body>
<h2>Exemple de la propriété flex-shrink</h2>
<div class="box">
<div style="background-color: #eee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color :#ccc;"></div>
<div style="background-color: #666;"></div>
</div>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
number | Définit le facteur de rétrécissement d'un élément flexible relativement aux éléments du même conteneur. La valeur initiale est 1. |
initial | Définit la valeur initiale. |
inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
29.0+ 21-28 -webkit- |
28.0+ |
9.0+ 6.1-8.0 -webkit- |
12.1+ |
Pratiquez vos connaissances
Qu'est-ce que la propriété CSS 'flex-shrink' fait?
Correcte!
Incorrecte!