Šajā pamācībā aplūkosim CSS īpašību modifikatoru flex-shrink. Šī opcija ir daļa no flexbox modeļa, kas ļauj izveidot elastīgus izkārtojumus, kuri pielāgojas dažādiem ekrāna izmēriem. Lai gan iepriekšējā videoklipā mēs aplūkojām flex-grow, kas kontrolē, kā elementi elastīgajā konteinerā var augt, šoreiz mēs runājam par elementu saraušanu, ja vieta konteinerā ir mazāka par norādīto flex-base. Šajā rakstā uzzināsiet, kā izmantot flex-shrink, lai ierobežotu vai pielāgotu fleksibloka elementu saraušanu.
Galvenie secinājumi
- Flex-shrink nosaka, cik ļoti elements var sarukt, ja nav pietiekami daudz vietas.
- Flex-shrink noklusējuma vērtība ir 1, kas nozīmē, ka elements var aizņemt vietu atkarībā no tā, cik daudz vietas ir pieejams un cik daudz citu elementu ir definēti konteinerā.
- Var izmantot flex-shrink, lai definētu konkrētu saraušanās attiecību starp vairākiem elementiem.
Soli pa solim
Turpmāk es izskaidrošu soļus, kā maksimāli izmantot flex-shrink iespējas. Katru soli papildināšu ar ekrānšāviņu mainīgajiem, kurus vēlāk varēsiet aizstāt ar attiecīgajiem ekrānšāviņiem no videoklipa.
Vispirms jūs redzēsiet pamata flexbox lietojumprogrammu CSS. Jums ir trīs elementi, kuru fleksibloka bāze ir 100 pikseļi. Ja elastīgajā konteinerā ir pietiekami daudz vietas, viss paliek, kā plānots.
Tagad mēs samazinām konteinera augstumu līdz 200 pikseļiem. Šajā gadījumā nepieciešamā vieta ir lielāka par konteinera augstumu. Elementiem joprojām ir 100 pikseļu elastīgā bāze, un tāpēc tie nevar sarukt, jo esam iestatījuši flex-shrink vērtību 0.
Lai aktivizētu saraušanas mehānismu, mainiet flex-shrink vērtību. Iestatiet to 1 elementam nav, lai informētu CSS, ka elementam nav jāsamazinās, cik vien iespējams.
Tagad saglabājiet izmaiņas, un redzēsiet, ka navigācijas elements ir proporcionāli samazināts līdz minimālajam augstumam, ko nosaka saturs.
Ja vēlaties, lai visi elementi saruktu vienādi, visiem elementiem iestatiet flex-shrink vērtību 1. Ja konteiners tagad kļūst mazāks par nepieciešamo vietu, visi elementi attiecīgi saruks.
Lai apkopotu, kā dažādas elastīgās saraušanas vērtības ietekmē izkārtojumu, izvēlieties tādu attiecību kā 1:1:2. Šajā gadījumā galvenais apgabals (main) saņem lielāko saraušanas daļu, bet pārējie elementi katrs saņem mazāku daļu.
Tas nozīmē, ka vietas trūkuma gadījumā galvenais elements aizņems vairāk vietas vai tam būs nepieciešams mazāk vietas nekā pārējiem diviem elementiem. Tomēr, ja vēlaties, lai izkārtojums tiktu pielāgots sīkāk, varat arī iestatīt elastīgo saraušanu visiem elementiem uz vienādu vērtību.
Visbeidzot, jūs varat apvienot elastīgas izkārtojuma vērtības flex-grow, flex-shrink un flex-base kopā, kas sniedz jums lielāku elastību, izstrādājot izkārtojumu CSS. Pārliecinieties, ka vienmēr pielāgojat tās sava dizaina prasībām.
Kopsavilkums
Šajā pamācībā jūs uzzinājāt, kā izmantot flex-shrink CSS, lai kontrolētu elastīgo kastes elementu izmēru maiņu. Jūs uzzinājāt par dažādiem veidiem, kā definēt saraušanu, un to, kā tie ietekmē izkārtojumu.
Biežāk uzdotie jautājumi
Kā darbojas flex-shrink?flex-shrink nosaka, cik ļoti elements var sarukt, ja pieejamā vieta ir mazāka par flex-bāzi.
Kāda ir flex-shrink noklusējuma vērtība?flex-shrink noklusējuma vērtība ir 1, kas nozīmē, ka visi elementi samazinās vienādi.
Kā iestatīt flex-shrink vairākiem elementiem?Norādot visiem elementiem vienu un to pašu flex-shrink vērtību, saraušanās tiek sadalīta vienmērīgi.
Vai flex-shrink var izmantot kopā ar flex-grow?Jā, elastīga izkārtojuma panākšanai var izmantot kopā flex-shrink, flex-grow un flex-base.
Kas notiek, ja flex-shrink ir iestatīts uz 0?Ja flex-shrink ir iestatīts uz 0, attiecīgie elementi nesamazinās, pat ja konteiners ir mazāks par flex-base summu.
