Den flex-shrinkegenskapen er en under egenskap av Flexible Box Layout modul.
Den spesifiserer "flex-krympefaktoren", som bestemmer hvor mye flex-elementet vil krympe i forhold til resten av flex-elementene i flex-beholderen når det ikke er nok plass på raden.
Når den utelates, settes den til 1og flex-krympefaktoren multipliseres med flex-basis når man fordeler negativt rom.
Syntaks
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
For å se hele potensialet i denne demoen, må du kunne endre størrelsen på bredden, så ta en titt på den direkte på CodePen.
I denne demonstrasjonen:
- Det første elementet har
flex: 1 1 20em(kortform forflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Det andre elementet har
flex: 2 2 20em(kortform forflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Begge flex-elementene vil være 20 meter brede. På grunn av flex-grow (første parameter), hvis flexcontaineren er større enn 40em, vil det andre barnet ta dobbelt så mye gjenværende plass som det første barnet. Men hvis foreldreelementet er mindre enn 40 em bredt, vil det andre barnet ha dobbelt så mye barbert seg av det som det første barnet, slik at det ser mindre ut (på grunn av den andre parameteren, fleks-krymp).
Nettleserstøtte
- (moderne) betyr den nylige syntaksen fra spesifikasjonen (f.eks.
display: flex;) - (hybrid) betyr en merkelig uoffisiell syntaks fra 2011 (f.eks.
display: flexbox;) - (gammel) betyr den gamle syntaksen fra 2009 (f.eks.
display: box;)
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderne) 20- (gammel) | 3.1+ (gammel) | 2-21 (gammel) 22+ (ny) | 12.1+ (moderne) | 10+ (hybrid) | 2.1+ (gammel) | 3.2+ (gammel) |
Blackberry browser 10+ støtter den nye syntaksen.
For mer informasjon om hvordan du blander syntakser for å få best nettleserstøtte, se denne artikkelen (CSS-Tricks) eller denne artikkelen (DevOpera).