See kirjeldus on näide meetodi kohta, kuidas vältida painduvate üksuste kasvu või kahanemist Tailwind CSS-is.
Kuidas vältida Flex-esemete kasvamist või kahanemist taganttuules?
Et vältida painduvate üksuste kasvu ja kahanemist Tailwindis, looge HTML-fail. Seejärel kasutage ' paindlik-kasv-0 ” ja „ painduv-kahanev-0 ” utiliidid HTML-programmi konkreetsete flex-üksustega. Need utiliidid ei luba painduvatel esemetel kasvada ega kahaneda vastavalt painduvas mahutis olevale ruumile. Pärast seda kohandage muudatuste tagamiseks HTML-i veebilehe ekraani suurust.
Selle praktiliseks rakendamiseks järgige esitatud samme:
1. samm: vältige Flexi üksuste kasvamist ja kahanemist HTML-programmis
Looge HTML-programm ja kasutage ' paindlik-kasv-0 ” ja „ painduv-kahanev-0 ” utiliidid soovitud painduvate esemetega, et vältida nende kasvamist või kahanemist:
< keha >
< div klass = 'flex h-20' >
< div klass = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div klass = 'flex-shrink-0 bg-fuksia-500 w-40 m-1' > 2 < / div >
< div klass = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div klass = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / keha >
Siin:
- “ paindlik-kasv-0 ” klass takistab painduva elemendi kasvamist ja ruumi võtmist paindlikus konteineris.
- “ painduv-kahanev-0 ” klass takistab painduva eseme kokkutõmbumist ja vähenemist painduvas mahutis, kui ruumi pole piisavalt.
- “ painduvad-kasvad ” klass võimaldab painduval elemendil kasvada ja hõivata paindlikus konteineris vaba ruumi.
- “ painduv-kahanev ” klass võimaldab painduval esemel kokku tõmbuda, kui painduvas mahutis pole piisavalt ruumi.
2. samm: kontrollige väljundit
Vaadake HTML-i veebilehte ja muutke ekraani suurust tagamaks, et soovitud painduvate üksuste kasvamine ja kahanemine on takistatud:
Ülaltoodud väljund näitab, et painduv element “2” ei vähene ebapiisava ruumi korral ja üksus “1” ei kasva vabas ruumis. See näitab, et soovitud painduvate esemete kasvamine ja kahanemine on takistatud.
Järeldus
Et vältida painduvate esemete kasvu ja kahanemist Tailwindis, kasutage ' paindlik-kasv-0 ” ja „ painduv-kahanev-0 ” utiliidid HTML-programmis soovitud flex-üksustega. Kontrollimiseks muutke ja vaadake HTML-i veebilehe ekraani suurust. See kirjutis on näide sellest, kuidas vältida painduvate üksuste kasvu või kahanemist Tailwind CSS-is.