Fleksibilno - CSS-triki

Anonim

flex-shrinkLastnost je sub-lastnost modula Fleksibilna Box postavitve.

Določa "faktor upogibanja", ki določa, koliko se bo element upogibanja zmanjšal glede na ostale predmete upogibanja v vsebniku upognjenja, ko v vrstici ni dovolj prostora.

Ko je izpuščeno, se nastavi na 1in faktor upogibanja se pomnoži s podlago upogiba pri razdeljevanju negativnega prostora.

Sintaksa

flex-shrink: .flex-item ( flex-shrink: 2; )

Demo

Če želite videti celoten potencial te predstavitve, bi morali spremeniti njeno širino, zato si jo oglejte neposredno na CodePenu.

Oglejte si to pisalo!

V tej predstavitvi:

  • Prvi element je flex: 1 1 20em(okrajšava za flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
  • Druga točka je flex: 2 2 20em(okrajšava za flex-grow: 2, flex-shrink: 2, flex-basis: 20em)

Oba elementa flex želita, da sta široka 20em. Če je fleks posoda večja od 40em, bo zaradi upogibanja (prvi parameter) drugi otrok vzel dvakrat toliko prostora kot prvi otrok. Če pa je nadrejeni element širok manj kot 40em, ga bo drugi otrok obril dvakrat toliko kot prvi otrok, zaradi česar bo videti manjši (zaradi drugega parametra, flex-shrink).

Podpora za brskalnik

  • (moderno) pomeni nedavno sintakso iz specifikacije (npr. display: flex;)
  • (hibrid) pomeni nenavadno neuradno skladnjo iz leta 2011 (npr. display: flexbox;)
  • (staro) pomeni staro skladnjo iz leta 2009 (npr. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (moderno)
20- (staro)		 3,1+ (staro) 2–21 (stari)
22+ (novi)		 12,1+ (moderno) 10+ (hibrid) 2,1+ (staro) 3,2+ (staro)

Brskalnik Blackberry 10+ podpira novo sintakso.

Za več informacij o tem, kako mešati sintakse, da dobite najboljšo podporo za brskalnik, si oglejte ta članek (CSS-triki) ali ta članek (DevOpera).