flex-shrinkĪpašums ir sub-īpašums Elastīga Box Izkārtojums moduli.
Tas norāda “elastīgo saraušanās koeficientu”, kas nosaka, cik daudz elastīgais elements saruks salīdzinājumā ar pārējiem elastīgajiem priekšmetiem elastīgajā konteinerā, ja rindā nav pietiekami daudz vietas.
Ja tas tiek izlaists, tas tiek iestatīts uz 1un elastīgās saraušanās koeficients tiek reizināts ar elastības pamatu, sadalot negatīvo telpu.
Sintakse
flex-shrink: .flex-item ( flex-shrink: 2; )Demonstrācija
Lai redzētu pilnu šī demonstrācijas potenciālu, jums būs jāspēj mainīt tā platumu, tāpēc, lūdzu, apskatiet to tieši CodePen.
Šajā demonstrācijā:
- Pirmais punkts ir
flex: 1 1 20em(saīsinājumsflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Otrais punkts ir
flex: 2 2 20em(saīsinājumsflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Abas elastīgās preces vēlas būt 20 mm platas. Flex-grow (pirmais parametrs) dēļ, ja elastīgais konteiners ir lielāks par 40em, 2. bērns aizņems divreiz vairāk vietas, nekā pirmais bērns. Bet, ja vecāka elementa platums ir mazāks par 40em, tad 2. bērnam tas būs divreiz vairāk nocirsts nekā 1. bērnam, padarot to izskatu mazāku (2. parametra dēļ elastīgi sarukt).
Pārlūka atbalsts
- (mūsdienu) nozīmē neseno sintaksi no specifikācijas (piem.
display: flex;) - (hibrīds) ir nepāra neoficiāla sintakse no 2011. gada (piem.
display: flexbox;) - (vecs) nozīmē veco sintaksi no 2009. gada (piem.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (mūsdienu) 20 - (vecs) | 3.1+ (vecs) | 2–21 (vecs) 22+ (jauns) | 12,1+ (mūsdienu) | 10+ (hibrīds) | 2.1+ (vecs) | 3,2+ (vecs) |
Blackberry pārlūks 10+ atbalsta jauno sintaksi.
Lai iegūtu papildinformāciju par sintakses sajaukšanu, lai iegūtu vislabāko pārlūka atbalstu, lūdzu, skatiet šo rakstu (CSS-Tricks) vai šo rakstu (DevOpera).