Den flex-shrinkegenskab er en sub-egenskab af Flexible Box layout modul.
Den specificerer "flex-krympefaktoren", der bestemmer, hvor meget flex-elementet vil krympe i forhold til resten af flex-elementerne i flexcontaineren, når der ikke er nok plads på rækken.
Når den udelades, indstilles den til, 1og flexkrympningsfaktoren ganges med flexbasis, når der fordeles negativt rum.
Syntaks
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
For at se det fulde potentiale i denne demo skal du være i stand til at ændre størrelsen på bredden, så se det direkte på CodePen.
I denne demo:
- Det første punkt har
flex: 1 1 20em(forkortelse forflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Den anden vare har
flex: 2 2 20em(forkortelse forflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Begge flex-emner vil være 20 em brede. På grund af flex-grow (første parameter), hvis flexcontaineren er større end 40em, tager det 2. barn dobbelt så meget resterende plads som det første barn. Men hvis forældreelementet er mindre end 40 em bredt, vil det 2. barn have dobbelt så meget barberet af det som det første barn, hvilket får det til at se mindre ud (på grund af den 2. parameter, flex-shrink).
Browsersupport
- (moderne) betyder den nylige syntaks fra specifikationen (f.eks.
display: flex;) - (hybrid) betyder en ulige uofficiel syntaks fra 2011 (f.eks.
display: flexbox;) - (gammel) betyder den gamle syntaks fra 2009 (f.eks.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderne) 20- (gamle) | 3.1+ (gammel) | 2-21 (gammel) 22+ (ny) | 12.1+ (moderne) | 10+ (hybrid) | 2.1+ (gammel) | 3.2+ (gammel) |
Blackberry browser 10+ understøtter den nye syntaks.
For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).