CSS flex-shrinkPropriété

Exemple

A, B, C sont définis sur flex-shrink: 1; D, E sont définis sur flex-shrink: 2:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple (example.com)</title> <style>

#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; }

</style> </head> <body> <p>La largeur totale de la div est de 500px, flex-basis est de 120px.</p> <p>A, B, C définissent flex-shrink:1. D, E sont définis sur flex-shrink:2</p> <p>Les largeurs de D, E diffèrent de celles de A, B, C</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> </body> </html>

Essayez-le vous-même »

Analyse de l'exemple :

La valeur par défaut de flex-shrink est 1. Si la propriété n'est pas définie explicitement, elle utilisera automatiquement la valeur par défaut de 1 pour calculer le rapport après que tous les facteurs ont été additionnés afin d'effectuer la réduction d'espace.

Dans cet exemple, A, B et C définissent explicitement flex-shrink sur 1, tandis que D et E définissent flex-shrink sur 2. Par conséquent, le calcul divise l'espace restant en 7 parts au total, où A, B et C occupent chacun 1 part, et D et E occupent chacun 2 parts, soit 1:1:1:2:2

Nous pouvons voir que le conteneur parent est défini à 500px, et les éléments enfants sont définis à 120px. Après avoir additionné les éléments enfants, le total est de 600px, soit un dépassement de 100px par rapport au conteneur parent. Les 100px excédentaires doivent être absorbés par A, B, C, D, E via le facteur de réduction, donc la synthèse pondérée donne :100*1+100*1+100*1+100*2+100*2=700px。

Ainsi, nous pouvons calculer la quantité de débordement à retirer pour A, B, C, D, E :

A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

Enfin, les largeurs réelles de A, B, C, D et E sont respectivement :120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px, de plus, cette largeur inclut la bordure.

Prise en charge des navigateurs

Les nombres dans le tableau indiquent le numéro de version du premier navigateur qui prend en charge la propriété.

Le nombre suivant -webkit-, -ms- ou -moz- est la première version qui prend en charge la propriété préfixée.

Propriété
flex-shrink	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Définition et utilisation

La propriété flex-shrink spécifie les règles de réduction pour les éléments flex. Les éléments flex ne se réduisent que lorsque la somme de leurs largeurs par défaut est supérieure au conteneur, et la quantité de réduction dépend de la valeur de flex-shrink.

Remarque :Si l'élément n'est pas un élément d'un objet flexbox, la propriété flex-shrink n'a aucun effet.

Valeur par défaut :	1
Héritée :	non
Animable :	Yes. SeeAnimable。 Essayez-le vous-même
version :	CSS3
Syntaxe JavaScript :	object.style.flexShrink="5" Essayez-le vous-même

Syntaxe CSS

flex-shrink: number|initial|inherit;

Valeur de la propriété

Valeur	Description
nombre	Un nombre qui spécifie la quantité dont l'élément se réduira par rapport aux autres éléments flexibles. La valeur par défaut est 1.
initial	Définissez cette propriété sur sa valeur par défaut. Voirinitial。
inherit	Hérite de cette propriété depuis l'élément parent. Voirinherit。