Šajā rakstā ir izskaidrota metode, kā novērst elastīgo vienumu iesaiņošanu Tailwind CSS.
Kā novērst/apturēt Flex priekšmetu ietīšanu aizmugurējā vējā?
Lai apturētu elastīgo vienumu ietīšanu Tailwind, izveidojiet HTML failu. Pēc tam izmantojiet utilītu “flex-nowrap” ar elastīgo konteineru HTML programmā, lai novērstu elastīgu vienumu iesaiņošanu. Pēc tam nodrošiniet izmaiņas, apskatot HTML tīmekļa lapu.
Izmēģiniet tālāk minētās darbības, lai to labāk izprastu.
1. darbība: neļaujiet Flex vienumiem ietīt HTML programmā
Izveidojiet HTML programmu un izmantojiet ' flex-nowrap ” lietderība ar vēlamo elastīgo konteineru, lai novērstu elastīgu priekšmetu iesaiņošanu:
< ķermenis >
< div klasē = 'flex flex-nowrap h-40' >
< div klasē = 'bāze-1/4 bg-red-500 m-1' > 1 < / div >
< div klasē = 'bāze-1/3 bg-dzeltens-500 m-1' > 2 < / div >
< div klasē = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / ķermenis >
Šeit:
- ' flex ” klase iespējo flexbox izkārtojumu uz elementu un ļauj sakārtot un līdzināt bērnu elementus.
- ' flex-nowrap ” klase norāda, ka elastīgie vienumi nedrīkst ietīt vairākās rindās un saglabāt visus elastīgos vienumus vienā rindā.
- ' bāze-1/4 ”, “ bāze-1/3 ', un ' bāze-1/2 ” nodarbības nosaka iekšējo
platums līdz 25%, 33,33% un 50% no to vecākelementiem.
2. darbība: pārbaudiet izvadi
Lai pārliecinātos, ka elastīgie vienumi nav iesaiņoti, skatiet HTML tīmekļa lapu:
Iepriekš minētajā tīmekļa lapā elastīgie vienumi atrodas vienā rindā un nav iesaiņoti.
Secinājums
Lai neļautu elastīgiem priekšmetiem ietīt Tailwind, izmantojiet utilītu “flex-nowrap” ar vajadzīgo elastīgo konteineru HTML programmā. Šī utilīta novērš elastīgo priekšmetu iesaiņošanu. Lai veiktu pārbaudi, skatiet izmaiņas tīmekļa lapā. Šajā rakstā ir ilustrēta metode, kā novērst elastīgo vienumu iesaiņošanu Tailwind CSS.