Tässä artikkelissa selitetään menetelmä, jolla estetään joustavien kohteiden kääriminen Tailwind CSS:ään.
Kuinka estää/estää Flex-tuotteiden kääriminen myötätuuleen?
Jos haluat estää flex-kohteiden käärimisen Tailwindissä, luo HTML-tiedosto. Käytä sitten 'flex-nowrap' -apuohjelmaa HTML-ohjelman flex-säilön kanssa estääksesi joustavien kohteiden käärimisen. Varmista seuraavaksi muutokset tarkastelemalla HTML-verkkosivua.
Kokeile alla mainittuja vaiheita ymmärtääksesi sen paremmin:
Vaihe 1: Estä Flex-kohteiden kääriminen HTML-ohjelmaan
Tee HTML-ohjelma ja käytä ' flex-nowrap ” apuohjelma halutulla joustavalla säiliöllä estämään joustavien tavaroiden kääriminen:
< kehon >
< div luokkaa = 'flex flex-nowrap h-40' >
< div luokkaa = 'basis-1/4 bg-red-500 m-1' > 1 < / div >
< div luokkaa = 'basis-1/3 bg-yellow-500 m-1' > 2 < / div >
< div luokkaa = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / kehon >
Tässä:
- ' flex ” luokka mahdollistaa flexbox-asettelun elementti ja mahdollistaa alielementtien järjestämisen ja kohdistamisen.
- ' flex-nowrap ” luokka määrittää, että flex-kohteet eivät saa kietoutua useille riveille ja pitää kaikki flex-kohteet yhdellä rivillä.
- ' perus-1/4 ”, “ perus-1/3 ”, ja ” perus-1/2 ” luokat asettavat sisäisen
leveys 25 %, 33,33 % ja 50 % niiden yläelementeistä.
Vaihe 2: Tarkista lähtö
Varmista, että flex-kohteita ei ole kääritty, katsomalla HTML-verkkosivua:
Yllä olevalla verkkosivulla flex-tuotteet ovat yhdellä rivillä, eikä niitä ole kääritty.
Johtopäätös
Jos haluat estää flex-kohteiden käärimisen Tailwindissä, käytä 'flex-nowrap' -apuohjelmaa halutun joustosäiliön kanssa HTML-ohjelmassa. Tämä apuohjelma estää joustavien esineiden käärimisen. Tarkista muutokset verkkosivulta. Tämä artikkeli on havainnollistanut menetelmää, jolla estetään joustavien kohteiden kääriminen Tailwind CSS:ään.