Praktiskais ceļvedis Flexbox CSS: pareiza flex-grow izmantošana

Šajā rokasgrāmatā uzzināsiet, kā izmantot CSS īpašību flex-grow , lai kontrolētu elastīgo elementu pieaugumu elastīgajā konteinerā. Flexbox ir jaudīga izkārtojuma tehnoloģija, kas ļauj dinamiski un atsaucīgi izvietot elementus. Izmantojot flex-grow, varat noteikt, cik daudz vietas elementam vajadzētu aizņemt konteinerā, ja ir pieejama papildu vieta.

Galvenie secinājumi

• flex-grow nosaka attiecību, kādā elementam jāaug salīdzinājumā ar citiem elementiem.
• Ja flex-grow vērtība ir 0, tas nozīmē, ka elements nepieaug un aizņem tikai noteikto pamatizmēru.
• Visi elementi ar vienādu flex-grow vērtību aug vienmērīgi.
• Kopējā vieta tiek sadalīta, pamatojoties uz elastīgās augšanas vērtību summu.

Soli pa solim

Lai izskaidrotu šo jēdzienu, aplūkosim dažus soļus, kuros var efektīvi izmantot īpašību flex-grow.

1. solis: Veiciet sagatavošanās darbus

Vispirms ir jāizveido elastīgais konteiners un jādefinē daži elastīgie elementi. Visiem elementiem iestatiet fiksētu flex-bāzi. Turpmākajā piemērā flex-bāze katram elementam ir 100 pikseļi, un mēs izvēlamies vertikālu izkārtojumu (kolonnu).

Solis Nr. 2: iestatiet flex-grow uz nulli

Tālāk visiem elementiem iestatām flex-grow īpašību 0. Tas nozīmē, ka elementu augstums nepalielināsies un katrs elements paliks 100 pikseļu augstumā.

Solis Nr. 3: Pielāgojiet flex-grow galvenajam elementam

Tagad būs aizraujoši: mainiet flex-grow vērtību galvenajam elementam. Iestatiet galvenajam elementam flex-grow vērtību 1, bet pārējiem diviem elementiem saglabājiet flex-grow: 0. Rezultātā galvenais elements aizņems visu konteinerā pieejamo vietu.

Solis Nr. 4. Pielietojiet flex-grow citiem elementiem

Īpašību flex-grow var piemērot arī citiem elementiem. Piemēram, iestatiet flex-grow arī elementam footer 1. Pēkšņi viss izkārtojums tiek dinamiski pielāgots, palielinot vietu.

Solis Nr. 5: Vienmērīgs visu elementu pieaugums

Ja vēlaties, lai visi elementi augtu vienmērīgi, iestatiet visiem elementiem īpašību flex-grow ar vērtību 1. Tādējādi visi elementi augs vienmērīgi un aizpildīs pieejamo vietu. Tas ir īpaši noderīgi, ja nepieciešams vienveidīgs izkārtojums.

Solis 6: Pielāgojiet flex-base

Varat izmantot arī dažādas flex-base vērtības. Piemēram, navigācijas elementam iestatiet elastīgo bāzi 50 pikseļi. Šādā gadījumā navigācijas elements būs mazāks, bet tomēr pieaugs līdz ar atlikušo vietu.

7. solis: papildu vietas pārvaldīšana

Ja mainīsiet vairāku elementu bāzes vērtības, varēsiet redzēt, kā mainās pieauguma koeficients. Ja bāzes lielumi atšķiras, elements ar mazāku bāzi aizņems atšķirīgu brīvās vietas daļu.

8. solis: Pielāgojiet elastīgo augšanu mainīgi

Lai vēl vairāk kontrolētu elementa augšanu, dažiem elementiem var iestatīt elastības pieauguma vērtību 2, bet citiem elementiem - 1. Tādējādi elements ar lielāku vērtību iegūs vairāk vietas salīdzinājumā ar citiem.

9. darbība: Pielāgojiet konteinera lielumu

Pārbaudiet uzvedību, mainot konteinera augstumu. Piemēram, ja augstumu samazināsiet līdz 400 pikseļiem, elementu sadalījumā būs attiecīgi mazāk vietas. Redzēsiet, kā izkārtojums reaģē dinamiski.

Solis Nr. 10: Apvienojiet flex-grow un flex-shrink.

Ņemiet vērā, ka flex-grow un flex-shrink savstarpēji mijiedarbojas. Flex-grow nosaka, cik daudz vietas tiek pievienota, bet flex-shrink kontrolē, kas notiek, kad vietas ir mazāk. Šis jēdziens ir svarīgs, veidojot responsīvus dizainus.

Kopsavilkums

Šajā rokasgrāmatā uzzinājāt, kā izmantot CSS īpašību flex-grow, lai kontrolētu elastīgo elementu pieaugumu. Tagad jūs zināt, ka flex-grow ietekmē pieejamās vietas sadalījumu elastīgajā konteinerā un kā šos iestatījumus var izmantot, lai izveidotu dinamiskus un reaģējošus izkārtojumus.