En aquest article s'explicarà el mètode per evitar que els elements flexibles s'emboliquen a Tailwind CSS.
Com evitar/aturar que els articles flexibles s'emboliquen a Tailwind?
Per evitar que els elements flexibles s'emboliquen a Tailwind, feu un fitxer HTML. A continuació, utilitzeu la utilitat 'flex-nowrap' amb el contenidor flex del programa HTML per evitar que els elements flexibles s'emboliquen. A continuació, assegureu-vos dels canvis visualitzant la pàgina web HTML.
Proveu els passos esmentats a continuació per entendre-ho millor:
Pas 1: evita que els elements flexibles s'embolcallin al programa HTML
Feu un programa HTML i utilitzeu el ' flex-nowrap ” utilitat amb el contenidor flexible desitjat per evitar que els articles flexibles s'emboliquen:
< cos >
< div classe = 'flex flex-nowrap h-40' >
< div classe = 'base-1/4 bg-vermell-500 m-1' > 1 < / div >
< div classe = 'base-1/3 bg-groc-500 m-1' > 2 < / div >
< div classe = 'base-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / cos >
Aquí:
- “ flexionar ” La classe permet el disseny de flexbox al element i permet disposar i alinear els elements secundaris.
- “ flex-nowrap ” La classe especifica que els elements flexibles no s'han d'ajustar a diverses línies i mantenir tots els elements flexibles en una sola línia.
- El ' base-1/4 ”, “ base-1/3 ”, i “ base-1/2 ” les classes estableixen l'interior
l'amplada del 25%, 33,33% i 50% dels seus elements pare, respectivament.
Pas 2: verifiqueu la sortida
Per assegurar-vos que els elements flexibles no s'han embolicat, consulteu la pàgina web HTML:
A la pàgina web anterior, els elements flexibles es troben en una sola línia i no s'han embolicat.
Conclusió
Per evitar que els elements flexibles s'embolcallin a Tailwind, utilitzeu la utilitat 'flex-nowrap' amb el contenidor flexible desitjat al programa HTML. Aquesta utilitat evita que els elements flexibles s'emboliquen. Per a la verificació, consulteu els canvis a la pàgina web. Aquest article ha il·lustrat el mètode per evitar que els elements flexibles s'emboliquen a Tailwind CSS.