La flex-shrinkpropriété est une sous-propriété du module Disposition de boîte flexible.
Il spécifie le «facteur de rétrécissement flexible», qui détermine dans quelle mesure l'élément flexible rétrécira par rapport au reste des éléments flexibles dans le conteneur flex lorsqu'il n'y a pas assez d'espace sur la ligne.
Lorsqu'il est omis, il est défini sur 1et le facteur de rétrécissement flexible est multiplié par la base flexible lors de la distribution de l'espace négatif.
Syntaxe
flex-shrink: .flex-item ( flex-shrink: 2; )Démo
Pour voir tout le potentiel de cette démo, vous devrez être en mesure de redimensionner sa largeur, alors jetez-y un coup d'œil directement sur CodePen.
Dans cette démo:
- Le premier élément a
flex: 1 1 20em(abréviation deflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Le deuxième élément a
flex: 2 2 20em(abréviation deflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Les deux éléments flexibles veulent avoir une largeur de 20em. En raison du flex-grow (premier paramètre), si le conteneur flex est plus grand que 40em, le 2ème enfant prendra deux fois plus d'espace que le premier enfant. Mais si l'élément parent mesure moins de 40em de large, le 2ème enfant en aura deux fois plus que le 1er enfant, ce qui le rendra plus petit (à cause du 2ème paramètre, flex-shrink).
Prise en charge du navigateur
- (moderne) signifie la syntaxe récente de la spécification (par exemple
display: flex;) - (hybride) signifie une syntaxe non officielle étrange de 2011 (par exemple
display: flexbox;) - (ancien) signifie l'ancienne syntaxe de 2009 (par exemple
display: box;)
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderne) 20- (ancien) | 3.1+ (ancien) | 2-21 (ancien) 22+ (nouveau) | 12.1+ (moderne) | 10+ (hybride) | 2.1+ (ancien) | 3.2+ (ancien) |
Le navigateur Blackberry 10+ prend en charge la nouvelle syntaxe.
Pour plus d'informations sur la façon de mélanger les syntaxes afin d'obtenir le meilleur support du navigateur, veuillez vous référer à cet article (CSS-Tricks) ou à cet article (DevOpera).