Painduv-kahanev - CSS-trikid

Anonim

flex-shrinkVara on sub-vara Paindlik Box paigutus moodul.

See määrab „painde kokkutõmbumisteguri”, mis määrab, kui palju painduv element kahaneb võrreldes paindmahuti ülejäänud painduvate üksustega, kui real pole piisavalt ruumi.

Kui see välja jätta, määratakse see väärtuseks 1ja negatiivse ruumi jaotamisel korrutatakse painde kokkutõmbumistegur paindlikkuse alusega.

Süntaks

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

Demo

Selle demo täieliku potentsiaali nägemiseks peaksite saama selle laiust muuta, nii et palun vaadake seda otse CodePenis.

Vaadake seda pliiatsit!

Selles demos:

  • Esimene toode on flex: 1 1 20em(tingliku flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
  • Teine küsimus on flex: 2 2 20em(tingliku flex-grow: 2, flex-shrink: 2, flex-basis: 20em)

Mõlemad paindlikud elemendid soovivad olla 20em laiused. Paindliku kasvu (esimene parameeter) tõttu võtab 2. laps, kui paindekonteiner on suurem kui 40 em, kaks korda rohkem ruumi kui esimene laps. Kuid kui vanemelemendi laius on alla 40em, on 2. lapsel sellest kaks korda rohkem raseeritud kui esimesel lapsel, muutes selle väiksemaks (2. parameetri tõttu paindub-kahaneb).

Brauseri tugi

  • (kaasaegne) tähendab spetsifikatsiooni hiljutist süntaksit (nt display: flex;)
  • (hübriid) - paaritu mitteametlik süntaks aastast 2011 (nt display: flexbox;)
  • (vana) tähendab vana süntaksit aastast 2009 (nt display: box;)
Chrome Safari Firefox Ooper IE Android iOS
21+ (kaasaegne)
20 - (vana)		 3.1+ (vana) 2–21 (vana)
22+ (uus)		 12,1+ (kaasaegne) 10+ (hübriid) 2.1+ (vana) 3,2+ (vana)

Blackberry brauser 10+ toetab uut süntaksit.

Lisateavet süntaksi segamise kohta, et saada parim brauseritugi, leiate sellest artiklist (CSS-trikid) või sellest artiklist (DevOpera).