Flexibilni model: Nadzorovanje zmanjšanja v smeri prilagodljivosti z uporabo svojstva flex-shrink

V tem navodilu se bomo posvetili CSS lastnosti flex-shrink. Ta možnost je del Flexbox modela, ki vam omogoča, da ustvarite prožne postavitve, ki se prilagajajo različnim velikostim zaslona. Medtem ko smo v zadnjem videu obravnavali flex-grow, ki ureja, kako se elementi v Flex Containerju lahko raztegnejo, se tokrat osredotočamo na krčenje elementov, ko je prostora vsebine manj kot je določena osnovna vrednost flex-basis. V tem prispevku se boste naučili, kako z flex-shrink geografsko omejiti ali prilagoditi krčenje elementov Flexboxa.

Najpomembnejše ugotovitve

• flex-shrink določa, koliko lahko element skrči, če ni dovolj prostora.
• Privzeta vrednost za flex-shrink je 1, kar pomeni, da lahko element zavzame prostor, odvisno od razpoložljivega prostora in kako so drugi elementi vsebine v Containerju določeni.
• Flex-shrink se lahko uporablja, da se določi določeno razmerje za krčenje med več elementi.

Korak za korakom vodič

V nadaljevanju vam bom razložil korake, kako optimalno uporabljati flex-shrink. Vsak korak bom opremil s spremenljivkami posnetka zaslona, ki jih lahko kasneje zamenjate s posnetki zaslona iz videa.

Prvo boste videli osnovno uporabo Flexboxa v CSS. Imate tri elemente, ki imajo osnovno vrednost flex-basis 100 pikslov. Če je v Flex Containerju dovolj prostora, ostane vse po načrtih.

Sedaj zmanjšamo višino kontejnerja na 200 pikslov. V tem primeru je potreben prostor večji od višine kontejnerja. Elementi še vedno imajo osnovno vrednost flex-basis 100 pikslov in se zato ne morejo skrčiti, ker smo flex-shrink nastavili na 0.

Za aktiviranje mehanizma krčenja spremenite vrednost flex-shrink. Nastavite za element nav na 1. S tem sporočite CSS, da se element nav lahko maksimalno skrči.

Zdaj shranite svoje spremembe in opazili boste, da se bo element nav sorazmerno skrčil, in sicer do minimalne višine, ki jo določa vsebina.

Če želite, da se vsi elementi enakomerno skrčijo, nastavite flex-shrink za vse elemente na 1. Če je kontejner zdaj manjši od potrebnega prostora, se vsi elementi ustrezno skrčijo.

Da prikažemo, kako se različne vrednosti flex-shrink odražajo na postavitvi, izberite razmerje, kot je 1:1:2. V tem primeru bo glavno območje (main) prejelo največji delež krčenja, medtem ko bosta druga elementa prejela manjše deleže.

To pomeni, da bo glavni element v primeru prostorske stiske zasedel več prostora ali potreboval manj prostora kot druga elementa. Če pa želite prilagoditev postavitve brez pritiska, lahko flex-shrink nastavite za vse elemente na isto vrednost.

Za zaključek lahko vrednosti flex-grow, flex-shrink in flex-basis združite, kar vam omogoča večjo prilagodljivost pri oblikovanju postavitve v CSS. Vedno pazite, da jih prilagodite zahteve vašega oblikovanja.

Povzetek

V tem navodilu ste se naučili, kako uporabiti flex-shrink v CSS za upravljanje spreminjanja velikosti elementov Flexboxa. Spoznali ste različne načine določanja krčenja in kako to vpliva na postavitev.