Acest articol va exemplifica metoda de a preveni creșterea sau micșorarea elementelor flexibile în Tailwind CSS.
Cum să preveniți ca obiectele Flex să crească sau să se micșoreze în Tailwind?
Pentru a preveni creșterea și micșorarea elementelor flexibile în Tailwind, creați fișierul HTML. Apoi, utilizați „ flex-creștere-0 ' și ' flex-shrink-0 ” utilități cu elementele flexibile specifice din programul HTML. Aceste utilități nu permit articolelor flexibile să crească sau să se micșoreze în funcție de spațiul din containerul flexibil. După aceea, ajustați dimensiunea ecranului paginii web HTML pentru a asigura modificări.
Urmați pașii furnizați pentru implementarea sa practică:
Pasul 1: Preveniți ca elementele Flex să crească și să se micșoreze în programul HTML
Faceți un program HTML și utilizați „ flex-creștere-0 ' și ' flex-shrink-0 ” utilități cu elementele flexibile dorite pentru a le împiedica să crească sau să se micșoreze:
< corp >
< div clasă = „flex h-20” >
< div clasă = „flex-grow-0 bg-yellow-500 w-40 m-1” > 1 < / div >
< div clasă = „flex-shrink-0 bg-fuchsia-500 w-40 m-1” > 2 < / div >
< div clasă = „flex-grow bg-teal-500 w-40 m-1” > 3 < / div >
< div clasă = „flex-shrink bg-red-500 w-40 m-1” > 4 < / div >
< / div >
< / corp >
Aici:
- „ flex-creștere-0 Clasa ” împiedică elementul flex să crească și să ocupe spațiu suplimentar în containerul flex atunci când spațiul este disponibil.
- „ flex-shrink-0 Clasa ” împiedică micșorarea și reducerea articolului flexibil în interiorul containerului flexibil atunci când spațiul este insuficient.
- „ flex-creștere ” permite articolului flex să crească și să ocupe spațiul disponibil în containerul flex.
- „ flex-contractie ” permite articolului flexibil să se micșoreze dacă nu există suficient spațiu în containerul flexibil.
Pasul 2: Verificați ieșirea
Vizualizați pagina web HTML și modificați dimensiunea ecranului pentru a vă asigura că elementele flexibile dorite nu au fost împiedicate să crească și să se micșoreze:
Rezultatele de mai sus arată că elementul flexibil „2” nu se micșorează în spațiul insuficient, iar elementul „1” nu crește în spațiul disponibil. Acest lucru indică faptul că elementele flexibile dorite au fost împiedicate să crească și să se micșoreze.
Concluzie
Pentru a preveni ca elementele flexibile să crească și să se micșoreze în Tailwind, utilizați „ flex-creștere-0 ' și ' flex-shrink-0 ” utilități cu elementele flexibile dorite în programul HTML. Pentru verificare, modificați și vizualizați dimensiunea ecranului paginii web HTML. Acest articol a exemplificat metoda de a preveni creșterea sau micșorarea elementelor flexibile în Tailwind CSS.