Šajā pārrakstā tiks parādīta metode, kā novērst elastīgo vienumu augšanu vai saraušanos Tailwind CSS.
Kā novērst Flex priekšmetu augšanu vai saraušanos aizmugurējā vējā?
Lai novērstu elastīgo vienumu augšanu un samazināšanos programmā Tailwind, izveidojiet HTML failu. Pēc tam izmantojiet ' flex-grow-0 ' un ' flex-shrink-0 ” utilītas ar īpašiem elastīgiem vienumiem HTML programmā. Šīs utilītas neļauj elastīgiem priekšmetiem augt vai sarukt atkarībā no vietas elastīgajā konteinerā. Pēc tam pielāgojiet HTML tīmekļa lapas ekrāna izmēru, lai nodrošinātu izmaiņas.
Lai to praktiski īstenotu, izpildiet norādītās darbības:
1. darbība: neļaujiet Flex vienumiem augt un sarukt programmā HTML
Izveidojiet HTML programmu un izmantojiet ' flex-grow-0 ' un ' flex-shrink-0 ” komunālie pakalpojumi ar vēlamajiem elastīgajiem priekšmetiem, lai novērstu to augšanu vai saraušanos:
< ķermeni >
< div klasē = 'flex h-20' >
< div klasē = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div klasē = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div klasē = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div klasē = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / ķermeni >
Šeit:
- ' flex-grow-0 ” klase neļauj elastīgajam priekšmetam augt un aizņemt papildu vietu elastīgajā konteinerā, kad ir brīva vieta.
- ' flex-shrink-0 ” klase neļauj elastīgajam priekšmetam sarauties un samazināties elastīgajā konteinerā, ja vietas nepietiek.
- ' flex-augt ” klase ļauj elastīgajam vienumam augt un aizņemt pieejamo vietu elastīgajā konteinerā.
- ' elastīga saraušanās ” klase ļauj elastīgajam priekšmetam sarukt, ja elastīgajā konteinerā nav pietiekami daudz vietas.
2. darbība: pārbaudiet izvadi
Skatiet HTML tīmekļa lapu un mainiet ekrāna izmēru, lai nodrošinātu, ka vēlamie elastīgie vienumi nav auguši un sarukuši:
Iepriekš redzamā izvade parāda, ka elastīgais vienums “2” nesaraujas nepietiekamā vietā un vienums “1” nepieaug brīvajā vietā. Tas norāda, ka vēlamajiem elastīgajiem priekšmetiem ir liegts augt un sarukt.
Secinājums
Lai novērstu elastīgo priekšmetu augšanu un saraušanos Tailwind laikā, izmantojiet ' flex-grow-0 ' un ' flex-shrink-0 ” utilītas ar vēlamajiem flex vienumiem HTML programmā. Lai pārbaudītu, mainiet un skatiet HTML tīmekļa lapas ekrāna izmēru. Šis raksts ir piemērs metodei, kā novērst elastīgo vienumu augšanu vai saraušanos Tailwind CSS.