Joustava kutistuminen - CSS-temppuja

flex-shrinkOminaisuus on osa-ominaisuus Flexible Box Asettelu moduuli.

Se määrittää "joustavan kutistumistekijän", joka määrittää, kuinka paljon joustava esine kutistuu suhteessa muihin joustosäiliön joustaviin kohteisiin, kun rivillä ei ole tarpeeksi tilaa.

Kun se jätetään pois, se asetetaan arvoon 1ja joustokutistumistekijä kerrotaan joustopohjalla negatiivista tilaa jaettaessa.

Syntaksi

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

Demo

Nähdäksesi tämän esittelyn täyden potentiaalin sinun on pystyttävä muuttamaan sen leveyttä, joten katsokaa sitä suoraan CodePenissä.

Katso tämä kynä!

Tässä esittelyssä:

Ensimmäinen kohde on flex: 1 1 20em(lyhenteenä flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
Toinen kohta on flex: 2 2 20em(lyhenteenä flex-grow: 2, flex-shrink: 2, flex-basis: 20em)

Molemmat joustavat tuotteet haluavat olla 20em leveitä. Joustavan kasvun (ensimmäinen parametri) vuoksi, jos joustosäiliö on suurempi kuin 40em, toinen lapsi vie kaksi kertaa niin paljon tilaa kuin ensimmäinen lapsi. Mutta jos vanhemman elementin leveys on alle 40em, toisella lapsella on siitä kaksi kertaa enemmän ajeltu kuin ensimmäisellä lapsella, jolloin se näyttää pienemmältä (toisen parametrin takia, flex-shrink).

Selaimen tuki

(moderni) tarkoittaa viimeisintä syntaksia spesifikaatiosta (esim. display: flex;)
(hybridi) tarkoittaa outoa epävirallista syntaksia vuodelta 2011 (esim. display: flexbox;)
(vanha) tarkoittaa vanhaa syntaksia vuodelta 2009 (esim. display: box;)