Šioje pamokoje apžvelgsime CSS savybės modifikatorių flex-shrink . Ši parinktis yra flexbox modelio dalis, leidžianti kurti lanksčius maketus, kurie prisitaiko prie skirtingų ekrano dydžių. Praėjusiame vaizdo įraše aptarėme flex-grow, kuris kontroliuoja, kaip gali augti flex konteinerio elementai, o šį kartą kalbėsime apie elementų susitraukimą, kai vietos konteineryje yra mažiau nei nurodyta flex-base. Šiame straipsnyje sužinosite, kaip naudoti flex-shrink, kad apribotumėte arba sureguliuotumėte flexbox elementų mažinimą.
Pagrindinės išvados
- flex-shrink nustato, kiek elementas gali susitraukti, jei nepakanka vietos.
- Numatytoji flex-shrink reikšmė yra 1, o tai reiškia, kad elementas gali užimti vietos priklausomai nuo to, kiek vietos yra ir kiek kitų elementų apibrėžta konteineryje.
- Naudodami flex-shrink galite nustatyti konkretų kelių elementų susitraukimo santykį.
Žingsnis po žingsnio
Toliau paaiškinsiu žingsnius, kaip maksimaliai išnaudoti flex-shrink. Kiekvienam žingsniui pateiksiu ekrano kopijų kintamuosius, kuriuos vėliau galėsite pakeisti atitinkamomis ekrano kopijomis iš vaizdo įrašo.
Pirmiausia pamatysite pagrindinį flexbox taikymą CSS. Turite tris elementus, kurių flex-base yra 100 pikselių. Jei flex konteineryje yra pakankamai vietos, viskas išlieka taip, kaip suplanuota.
Dabar sumažiname konteinerio aukštį iki 200 pikselių. Šiuo atveju reikia daugiau vietos nei konteinerio aukštis. Elementai vis dar turi 100 pikselių flex-base, todėl negali sumažėti, nes nustatėme flex-shrink reikšmę 0.
Norėdami įjungti mažinimo mechanizmą, pakeiskite flex-shrink reikšmę. Nav elementui nustatykite 1, kad CSS praneštų, jog nav elementas turėtų kuo labiau susitraukti.
Dabar išsaugokite pakeitimus ir pamatysite, kad navigacijos elementas proporcingai susitraukia iki turinio nurodyto mažiausio aukščio.
Jei norite, kad visi elementai sumažėtų vienodai, nustatykite visų elementų flex-shrink reikšmę 1. Jei dabar konteineris taps mažesnis nei reikiama erdvė, visi elementai atitinkamai sumažės.
Norėdami apibendrinti, kaip skirtingos lankstumo mažinimo vertės veikia išdėstymą, pasirinkite tokį santykį kaip 1:1:2. Šiuo atveju pagrindinė sritis (main) susitraukia didžiausia dalimi, o kiti elementai - kiekvienas mažesne dalimi.
Tai reiškia, kad jei trūksta vietos, pagrindinis elementas užims daugiau vietos arba jam reikės mažiau vietos nei kitiems dviem elementams. Tačiau jei norite sutrupinto išdėstymo pritaikymo, taip pat galite nustatyti vienodą visų elementų flex-shrink reikšmę.
Galiausiai galite sujungti visas flex-grow, flex-shrink ir flex-base reikšmes kartu, o tai suteikia daugiau lankstumo projektuojant išdėstymą CSS. Įsitikinkite, kad visada jas pritaikote pagal savo dizaino reikalavimus.
Apibendrinimas
Šioje pamokoje sužinojote, kaip naudoti CSS funkciją flex-shrink, kad galėtumėte valdyti flexbox elementų dydžio keitimą. Sužinojote apie skirtingus mažinimo apibrėžimo būdus ir kaip jie veikia išdėstymą.
Dažniausiai užduodami klausimai
Kaip veikia flex-shrink?flex-shrink nustato, kiek elementas gali susitraukti, jei turima erdvė yra mažesnė už flex-base.
Kokia yra numatytoji flex-shrink reikšmė?flex-shrink numatytoji reikšmė yra 1, o tai reiškia, kad visi elementai susitraukia vienodai.
Kaip nustatyti flex-shrink keliems elementams?Visiems elementams nurodžius tą pačią flex-shrink vertę, susitraukimas pasiskirsto tolygiai.
Ar galiu naudoti flex-shrink kartu su flex-grow?Taip, flex-shrink, flex-grow ir flex-base galima naudoti kartu, kad būtų pasiektas lankstus išdėstymas.
Kas atsitiks, jei flex-shrink bus nustatyta vertė 0?Jei flex-shrink bus nustatyta vertė 0, atitinkami elementai nesusitrauks, net jei konteineris bus mažesnis už flex-base sumą.
