Ipapaliwanag ng artikulong ito ang paraan upang maiwasan ang mga flex na item mula sa pagbalot sa Tailwind CSS.
Paano Pigilan/Ihinto ang mga Flex na Item Mula sa Pagbalot sa Tailwind?
Upang ihinto ang mga flex na item mula sa pagbalot sa Tailwind, gumawa ng HTML file. Pagkatapos, gamitin ang utility na 'flex-nowrap' na may flex container sa HTML program upang maiwasan ang mga flex na item mula sa pagbabalot. Susunod, tiyakin ang mga pagbabago sa pamamagitan ng pagtingin sa HTML web page.
Subukan ang mga nabanggit na hakbang sa ibaba, para mas maunawaan ito:
Hakbang 1: Pigilan ang Mga Flex na Item Mula sa Pag-wrap sa HTML Program
Gumawa ng HTML program at gamitin ang “ flex-nowrap ” utility na may ninanais na flex container upang maiwasan ang mga flex na item mula sa pagbabalot:
< katawan >
< div klase = 'flex flex-nowrap h-40' >
< div klase = 'batayan-1/4 bg-pula-500 m-1' > 1 < / div >
< div klase = 'batayan-1/3 bg-dilaw-500 m-1' > 2 < / div >
< div klase = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / katawan >
dito:
- “ baluktot ” klase ay nagbibigay-daan sa flexbox layout sa elemento at pinapayagan ang mga elemento ng bata na ayusin at ihanay.
- “ flex-nowrap Tinutukoy ng klase na ang mga flex item ay hindi dapat i-wrap sa maraming linya at panatilihin ang lahat ng flex item sa isang linya.
- Ang ' batayan-1/4 ”, “ batayan-1/3 ”, at “ batayan-1/2 ” itinakda ng mga klase ang panloob
's lapad sa 25%, 33.33%, at 50% ng kanilang mga pangunahing elemento, ayon sa pagkakabanggit.
Hakbang 2: I-verify ang Output
Upang matiyak na ang mga flex na item ay hindi pa nakabalot, tingnan ang HTML web page:
Sa web page sa itaas, ang mga flex na item ay nasa isang linya at hindi pa nakabalot.
Konklusyon
Upang maiwasan ang pagbalot ng mga flex item sa Tailwind, gamitin ang utility na 'flex-nowrap' na may gustong flex container sa HTML program. Pinipigilan ng utility na ito ang mga flex na item mula sa pagbabalot. Para sa pag-verify, tingnan ang mga pagbabago sa web page. Ang artikulong ito ay naglalarawan ng paraan upang maiwasan ang mga flex na item mula sa pagbalot sa Tailwind CSS.