Ang write-up na ito ay magiging halimbawa ng paraan upang maiwasan ang mga flex item na lumaki o lumiit sa Tailwind CSS.
Paano Pigilan ang Mga Flex na Item Mula sa Paglaki o Pag-urong sa Tailwind?
Upang maiwasan ang paglaki at pag-urong ng mga flex item sa Tailwind, gawin ang HTML file. Pagkatapos, gamitin ang ' flex-grow-0 'at' flex-shrink-0 ” mga utility na may mga partikular na flex item sa HTML program. Hindi pinapayagan ng mga utility na ito ang mga flex item na lumaki o lumiit ayon sa espasyo sa loob ng flex container. Pagkatapos nito, ayusin ang laki ng screen ng HTML web page upang matiyak ang mga pagbabago.
Sundin ang ibinigay na mga hakbang para sa praktikal na pagpapatupad nito:
Hakbang 1: Pigilan ang Mga Flex na Item Mula sa Paglaki at Pagliit sa HTML Program
Gumawa ng HTML program at gamitin ang “ flex-grow-0 'at' flex-shrink-0 ” mga utility na may ninanais na mga flex item upang maiwasan ang mga ito sa paglaki o pag-urong:
< katawan >
< div klase = 'flex h-20' >
< div klase = 'flex-grow-0 bg-dilaw-500 w-40 m-1' > 1 < / div >
< div klase = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div klase = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div klase = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / katawan >
dito:
- “ flex-grow-0 ” class na pumipigil sa flex item mula sa paglaki at pagkuha ng dagdag na espasyo sa loob ng flex container kapag may available na space.
- “ flex-shrink-0 ” class na pumipigil sa flex item mula sa pag-urong at pagbabawas sa loob ng flex container kapag kulang ang espasyo.
- “ flex-grow Ang klase ay nagbibigay-daan sa flex item na lumaki at sumakop sa magagamit na espasyo sa loob ng flex container.
- “ flex-shrink ” class ay nagbibigay-daan sa flex item na lumiit kung walang sapat na espasyo sa loob ng flex container.
Hakbang 2: I-verify ang Output
Tingnan ang HTML web page at baguhin ang laki ng screen upang matiyak na ang mga gustong flex na item ay napigilan na lumaki at lumiit:
Ang output sa itaas ay nagpapakita na ang flex item na '2' ay hindi lumiliit sa hindi sapat na espasyo at ang item na '1' ay hindi lumalaki sa magagamit na espasyo. Ito ay nagpapahiwatig na ang nais na mga bagay sa pagbaluktot ay napigilan na lumaki at lumiit.
Konklusyon
Upang maiwasan ang paglaki at pag-urong ng mga flex item sa Tailwind, gamitin ang “ flex-grow-0 'at' flex-shrink-0 ” mga utility na may gustong mga flex item sa HTML program. Para sa pag-verify, baguhin at tingnan ang laki ng screen ng HTML web page. Ang write-up na ito ay nagpakita ng paraan upang maiwasan ang mga flex na item na lumaki o lumiit sa Tailwind CSS.