Fleksibilno skupljanje - CSS-trikovi

Anonim

flex-shrinkNekretnina je pod-vlasništvo Fleksibilna Box Izgled modula.

Određuje "faktor savijanja", koji određuje koliko će se element savijanja smanjiti u odnosu na ostatak elemenata savijanja u spremniku za savijanje kada na retku nema dovoljno prostora.

Kad se izostavi, postavi se na, 1a faktor savijanja pri pomicanju pomnoži se s osnovicom savijanja pri raspodjeli negativnog prostora.

Sintaksa

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

Demo

Da biste vidjeli puni potencijal ove demonstracije, morali biste moći promijeniti njezinu širinu, pa je pogledajte izravno na CodePenu.

Pogledajte ovu olovku!

U ovom demo:

  • Prva stavka je flex: 1 1 20em(skraćenica za flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
  • Druga opcija je flex: 2 2 20em(skraćenica za flex-grow: 2, flex-shrink: 2, flex-basis: 20em)

Oba flex predmeta žele biti široka 20em. Zbog flex-grow (prvog parametra), ako je flex spremnik veći od 40em, 2. djetetu će trebati dvostruko više preostalog prostora od prvog djeteta. Ali ako je roditeljski element širok manje od 40em, tada će se drugo dijete obrijati dvostruko više od prvog djeteta, što će izgledati manje (zbog drugog parametra, flex-shrink).

Podrška preglednika

  • (moderno) znači nedavnu sintaksu iz specifikacije (npr. display: flex;)
  • (hibrid) znači neobičnu neslužbenu sintaksu iz 2011. (npr. display: flexbox;)
  • (stara) znači stara sintaksa iz 2009. (npr. display: box;)
Krom Safari Firefox Opera IE Android iOS
21+ (moderno)
20- (staro)		 3,1+ (staro) 2-21 (stari)
22+ (novi)		 12,1+ (moderno) 10+ (hibridno) 2,1+ (staro) 3,2+ (staro)

Preglednik Blackberry 10+ podržava novu sintaksu.

Za više informacija o tome kako miješati sintakse kako biste dobili najbolju podršku za preglednik, pogledajte ovaj članak (CSS-trikovi) ili ovaj članak (DevOpera).