See artikkel selgitab meetodit, kuidas vältida painduvate üksuste mähkimist Tailwind CSS-i.
Kuidas vältida/peatada Flex-esemete mähkimine taganttuules?
Paindlike üksuste Tailwindi mähkimise peatamiseks looge HTML-fail. Seejärel kasutage HTML-programmis flex-konteineriga utiliiti „flex-nowrap”, et vältida painduvate üksuste mähkimist. Järgmisena veenduge muudatuste tegemisel, vaadates HTML-i veebilehte.
Selle paremaks mõistmiseks proovige alltoodud samme.
1. samm: vältige Flexi üksuste mähkimist HTML-programmi
Looge HTML-programm ja kasutage ' flex-nowrap ” utiliit soovitud painduva konteineriga, et vältida painduvate esemete mähkimist:
< keha >
< div klass = 'flex flex-nowrap h-40' >
< div klass = 'basis-1/4 bg-red-500 m-1' > 1 < / div >
< div klass = 'basis-1/3 bg-yellow-500 m-1' > 2 < / div >
< div klass = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / keha >
Siin:
- “ painduv ” klass võimaldab flexboxi paigutust element ning võimaldab alamelemente järjestada ja joondada.
- “ flex-nowrap ” klass täpsustab, et painduvad üksused ei tohi mähkida mitmele reale ja hoida kõiki painduvaid üksusi ühel real.
- ' alus-1/4 ”, “ alus-1/3 ”, ja „ alus-1/2 ” klassid seavad sisemise
laius vastavalt 25%, 33,33% ja 50% nende lähteelementidest.
2. samm: kontrollige väljundit
Veendumaks, et painduvad üksused pole pakendatud, vaadake HTML-i veebilehte:
Ülaltoodud veebilehel on painduvad üksused ühel real ja neid pole pakendatud.
Järeldus
Et vältida painduvate üksuste mähkimist Tailwindis, kasutage utiliiti „flex-nowrap” koos soovitud paindekonteineriga HTML-programmis. See utiliit takistab painduvate esemete mähkimist. Kontrollimiseks vaadake muudatusi veebilehel. See artikkel on illustreerinud meetodit, kuidas vältida painduvate esemete mähkimist Tailwind CSS-i.