Selles õpetuses keskendume CSS omadusmodifikaatorile flex-shrink. See valik on osa Fleksikasti mudelist, mis võimaldab sul luua paindlikke kujundusi, mis kohanduvad erinevate ekraanisuurustega. Kui eelmises videos võtsime arutluse alla flex-grow, mis reguleerib, kuidas elemendid Fleksi-konteineris kasvada saavad, siis seekord räägime elementide kahanemisest, kui konteineris olev ruum on väiksem kui ette antud flex-basis. Selles postituses õpid, kuidas flex-shrink abil saad suunata või kohandada Fleksi-kasti elementide kahanemist.
Olulisemad järeldused
- flex-shrink määrab, kui palju element saab väheneda, kui ei ole piisavalt ruumi.
- Flex-shrink-i vaikimisi väärtus on 1, mis tähendab, et element võib võtta ruumi vastavalt sellele, kui palju ruumi on saadaval ja kuidas muud elemendid kastis on defineeritud.
- Saab kasutada flex-shrink-i, et määrata teatud suhe kahanemise vahel mitme elemendi vahel.
Juhend samm-sammult
Alljärgnevalt selgitan sulle samm-sammult, kuidas flex-shrink-i optimaalselt kasutada. Lisasin iga sammu juurde muutujad ekraanipiltide jaoks, mida hiljem saad asendada vastavate ekraanipiltidega videost.
Esmalt näed elementaarset flekskast-i rakendust CSS-is. Sul on kolm elementi, millel on flex-basis 100 pikslit. Piisava ruumi saadavuse korral jääb kõik planeeritud järgi.
Nüüd vähendame konteineri kõrgust 200 pikslineks. Sel juhul on vajalik ruum suurem kui konteineri kõrgus. Elementidel on endiselt flex-basis 100 pikslit ega saa seetõttu kahaneda, sest oleme flex-shrink-i seadnud 0-le.
Kahanemismehhanismi aktiveerimiseks muuda flex-shrink-i väärtust. Pane selleks elemendile nav 1. Nii annad CSS-ile teada, et nav võib maksimaalselt kahaneda.
Nüüd salvesta muudatused ja näed, et nav-element kahaneb proportsionaalselt ja jääb minimaalse kõrgusega, mis on määratud sisu poolt.
Kui soovid, et kõik elemendid kahanevad ühtlaselt, seadista flex-shrink kõigile elementidele 1-le. Kui konteiner on nüüd väiksem kui vajalik ruum, kahanevad kõik elemendid vastavalt.
Et näidata kokkuvõtlikult erinevate flex-shrink väärtuste mõju kujundusele, vali suhe nagu 1:1:2. Sel juhul saab põhiala (main) kõige suurema kahanemisosa, samal ajal kui teised elemendid saavad väiksemad osad.
See tähendab, et põhiala võtab ruumist rohkem ruumi või vajab vähem ruumi kui teised elemendid, kui ruum on piiratud. Kui soovid aga pigistatud kujunduse kohandamist, saad seada kõigile elementidele sama flex-shrink väärtuse.
Lõpuks saad kombineerida flex-grow, flex-shrink ja flex-basis väärtused, mis annab sulle suurema paindlikkuse CSS-i kujundamisel. Järgi alati oma disaini nõudeid.
Kokkuvõte
Selles õpetuses oled õppinud, kuidas kasutada flex-shrink-i CSS-is, et juhtida Fleksi-kasti elementide suuruse muutusi. Oled tutvunud erinevate võimalustega kahanemise määratlemiseks ja selle mõjuga kujundusele.
Sagedased küsimused
Kuidas flex-shrink töötab?Flex-shrink määrab, kui palju element saab kahaneda, kui olemasolev ruum on väiksem kui flex-basis.
Mis on flex-shrink vaikimisi väärtus?Flex-shrink-i vaikimisi väärtus on 1, mis tähendab, et kõik elemendid kahanevad ühtlaselt.
Kuidas seadistada flex-shrink mitmele elemendile?Pannes kõikidele elementidele sama flex-shrink väärtuse, jaotub kahanemine ühtlaselt.
Kas saan kasutada flex-shrinki koos flex-grow'ga?Jah, flex-shrink, flex-grow ja flex-basis saab koos kasutada, et saavutada paindlik kujundus.
Mis juhtub, kui panna flex-shrink väärtuseks 0?Kui flex-shrink on 0, ei kahane vastavad elemendid, isegi kui konteiner on väiksem kui flex-basis summa.
