V tomto návode sa budeme venovať modifikátoru vlastnosti CSS flex-shrink. Táto možnosť je súčasťou modelu flexbox , ktorý umožňuje vytvárať flexibilné rozvrhnutia, ktoré sa prispôsobujú rôznym veľkostiam obrazovky. Zatiaľ čo v minulom videu sme sa venovali funkcii flex-grow, ktorá riadi, ako môžu prvky v kontajneri flex rásť, tentoraz budeme hovoriť o zmenšovaní prvkov, keď je priestor v kontajneri menší ako zadaný základ flex-base. V tomto článku sa dozviete, ako používať flex-shrink na obmedzenie alebo úpravu zmenšovania prvkov flexboxu.
Kľúčové zistenia
- Funkcia flex-shrink určuje, o koľko sa môže prvok zmenšiť, ak nemá dostatok miesta.
- Predvolená hodnota pre flex-shrink je 1, čo znamená, že prvok môže zabrať miesto v závislosti od toho, koľko miesta je k dispozícii a koľko ďalších prvkov je definovaných v kontajneri.
- Pomocou funkcie flex-shrink môžete definovať konkrétny pomer zmenšenia medzi viacerými prvkami.
Pokyny krok za krokom
V nasledujúcom texte vysvetlím kroky, ako čo najlepšie využiť funkciu flex-shrink. Ku každému kroku uvediem premenné snímky obrazovky, ktoré môžete neskôr nahradiť príslušnými snímkami z videa.
Najskôr uvidíte základnú aplikáciu flexboxu v CSS. Máte tri prvky, ktoré majú základňu flexboxu 100 pixelov. Ak je v kontajneri flex dostatok miesta, všetko zostane podľa plánu.
Teraz znížime výšku kontajnera na 200 pixelov. V tomto prípade je potrebný priestor väčší ako výška kontajnera. Prvky majú stále flex-base 100 pixelov, a preto sa nemôžu zmenšiť, pretože sme nastavili flex-shrink na 0.
Ak chcete aktivovať mechanizmus zmenšovania, zmeňte hodnotu flex-shrink. Nastavte ju na hodnotu 1 pre prvok nav, aby ste informovali CSS, že prvok nav sa má čo najviac zmenšiť.
Teraz uložte zmeny a uvidíte, že navigačný prvok sa proporcionálne zmenší na minimálnu výšku určenú obsahom.
Ak chcete, aby sa všetky prvky zmenšili rovnako, nastavte flex-shrink pre všetky prvky na hodnotu 1. Ak sa teraz kontajner zmenší na menej ako požadovaný priestor, všetky prvky sa primerane zmenšia.
Ak chcete zhrnúť, ako rôzne hodnoty flex-shrink ovplyvňujú rozloženie, vyberte pomer, napríklad 1:1:2. V tomto prípade hlavná oblasť (main) dostane najväčší podiel zmenšenia, zatiaľ čo ostatné prvky dostanú každý menší podiel.
To znamená, že v prípade nedostatku miesta bude hlavný prvok zaberať viac miesta alebo bude vyžadovať menej miesta ako ostatné dva prvky. Ak však chcete drvivé prispôsobenie rozloženia, môžete tiež nastaviť flex-shrink na rovnakú hodnotu pre všetky prvky.
Nakoniec môžete kombinovať hodnoty pre flex-grow, flex-shrink a flex-base všetky dohromady, čo vám dáva väčšiu flexibilitu pri navrhovaní rozloženia v CSS. Dbajte na to, aby ste ich vždy prispôsobili požiadavkám vášho návrhu.
Zhrnutie
V tomto návode ste sa naučili, ako používať flex-shrink v CSS na ovládanie zmeny veľkosti prvkov flexbox. Dozvedeli ste sa o rôznych spôsoboch definovania zmenšenia a o tom, ako tieto spôsoby ovplyvňujú rozloženie.
Často kladené otázky
Ako funguje funkcia flex-shrink?flex-shrink určuje, o koľko sa môže prvok zmenšiť, ak je dostupný priestor menší ako základňa flexboxu.
Aká je predvolená hodnota flex-shrink?Predvolená hodnota flex-shrink je 1, čo znamená, že všetky prvky sa zmenšia rovnako.
Ako nastavím flex-shrink pre viacero prvkov?Zadaním rovnakej hodnoty flex-shrink pre všetky prvky sa zmenšenie rovnomerne rozloží.
Môžem použiť flex-shrink v kombinácii s flex-grow?Áno, flex-shrink, flex-grow a flex-base možno použiť spoločne na dosiahnutie flexibilného rozloženia.
Čo sa stane, ak je flex-shrink nastavený na 0?Ak je flex-shrink nastavený na 0, príslušné prvky sa nezmenšia, aj keď je kontajner menší ako súčet flex-base.
