Šiame straipsnyje bus paaiškinta, kaip išvengti lanksčių elementų įvyniojimo į Tailwind CSS.
Kaip neleisti / sustabdyti „Flex“ gaminių vyniojimą vėjyje?
Norėdami sustabdyti lanksčių elementų apvyniojimą Tailwind, sukurkite HTML failą. Tada naudokite „flex-nowrap“ įrankį su „flex“ konteineriu HTML programoje, kad išvengtumėte lanksčių elementų įvyniojimo. Tada patikrinkite pakeitimus peržiūrėdami HTML tinklalapį.
Išbandykite toliau nurodytus veiksmus, kad geriau suprastumėte:
1 veiksmas: neleiskite „Flex“ elementams apvynioti HTML programoje
Sukurkite HTML programą ir naudokite „ flex-nowrap “ įrankis su norimu lanksčiu konteineriu, kad lankstūs daiktai neapvyniotų:
< kūnas >
< div klasė = 'flex flex-nowrap h-40' >
< div klasė = 'basis-1/4 bg-red-500 m-1' > 1 < / div >
< div klasė = 'basis-1/3 bg-yellow-500 m-1' > 2 < / div >
< div klasė = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / kūnas >
Čia:
- “ lankstus “ klasė įgalina „flexbox“ išdėstymą elementą ir leidžia išdėstyti bei sulygiuoti antrinius elementus.
- “ flex-nowrap ” klasė nurodo, kad lankstieji elementai neturėtų vynioti į kelias eilutes ir visi lankstieji elementai turi būti vienoje eilutėje.
- „ pagrindas-1/4 “, „ pagrindas-1/3 “ ir „ pagrindas-1/2 “ klasės nustato vidinį
pločio iki 25%, 33,33% ir 50% jų pirminių elementų.
2 veiksmas: patikrinkite išvestį
Norėdami įsitikinti, kad lankstieji elementai nebuvo suvynioti, peržiūrėkite HTML tinklalapį:
Aukščiau pateiktame tinklalapyje lankstieji elementai yra vienoje eilutėje ir nebuvo suvynioti.
Išvada
Kad lankstieji elementai neapvyniotų „Tailwind“, naudokite „flex-nowrap“ įrankį su norimu lanksčiu konteineriu HTML programoje. Ši priemonė neleidžia lankstiems daiktams apvynioti. Norėdami patikrinti, peržiūrėkite pakeitimus tinklalapyje. Šiame straipsnyje iliustruotas metodas, kaip neleisti lanksčių elementų apvynioti Tailwind CSS.