De flex-shrinkeigenschap is een subeigenschap van de module Flexible Box Layout.
Het specificeert de "flex-krimpfactor", die bepaalt hoeveel het flexitem zal krimpen ten opzichte van de rest van de flexitems in de flexcontainer als er niet genoeg ruimte op de rij is.
Indien weggelaten, wordt deze ingesteld op 1en wordt de flex-krimpfactor vermenigvuldigd met de flexbasis bij het verdelen van negatieve ruimte.
Syntaxis
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
Om het volledige potentieel van deze demo te zien, zou je de breedte ervan moeten kunnen aanpassen, dus bekijk hem direct op CodePen.
In deze demo:
- Het eerste punt heeft
flex: 1 1 20em(afkorting voorflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Het tweede punt heeft
flex: 2 2 20em(afkorting voorflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Beide flexitems willen 20em breed zijn. Vanwege de flex-grow (eerste parameter), als de flexcontainer groter is dan 40em, neemt het 2e kind twee keer zoveel overgebleven ruimte in als het eerste kind. Maar als het bovenliggende element minder dan 40em breed is, dan heeft het 2e kind er twee keer zoveel van afgeschoren als het 1e kind, waardoor het kleiner lijkt (vanwege de 2e parameter, flex-shrink).
Browser-ondersteuning
- (modern) betekent de recente syntaxis van de specificatie (bijv.
display: flex;) - (hybride) betekent een vreemde onofficiële syntaxis uit 2011 (bijv.
display: flexbox;) - (oud) betekent de oude syntaxis van 2009 (bijv.
display: box;)
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (oud) | 3.1+ (oud) | 2-21 (oud) 22+ (nieuw) | 12.1+ (modern) | 10+ (hybride) | 2.1+ (oud) | 3.2+ (oud) |
Blackberry browser 10+ ondersteunt de nieuwe syntaxis.
Raadpleeg dit artikel (CSS-Tricks) of dit artikel (DevOpera) voor meer informatie over het mixen van syntaxis om de beste browserondersteuning te krijgen.