Šis įrašas parodys metodą, kaip užkirsti kelią lanksčių elementų augimui ar susitraukimui naudojant Tailwind CSS.
Kaip neleisti „Flex“ gaminiams augti ar susitraukti vėjyje?
Kad lankstieji elementai neaugtų ir nesumažėtų naudojant Tailwind, sukurkite HTML failą. Tada naudokite „ lankstus augimas-0 “ ir „ lankstus susitraukimas-0 “ komunalinės paslaugos su konkrečiais lankstumo elementais HTML programoje. Šios komunalinės paslaugos neleidžia lankstiems daiktams augti arba trauktis pagal erdvę lanksčiame konteineryje. Po to pakoreguokite HTML tinklalapio ekrano dydį, kad užtikrintumėte pakeitimus.
Atlikite nurodytus veiksmus, kad jį praktiškai įgyvendintumėte:
1 veiksmas: neleiskite „Flex“ elementams augti ir susitraukti HTML programoje
Sukurkite HTML programą ir naudokite „ lankstus augimas-0 “ ir „ lankstus susitraukimas-0 ” komunalinės paslaugos su norimais lanksčiais elementais, kad jie neaugtų ar nesusitrauktų:
< kūnas >
< div klasė = 'flex h-20' >
< div klasė = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div klasė = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div klasė = „flex-grow bg-teal-500 w-40 m-1“ > 3 < / div >
< div klasė = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / kūnas >
Čia:
- “ lankstus augimas-0 ” klasė neleidžia lanksčiam daiktui augti ir užimti papildomos vietos lankstaus konteinerio viduje, kai yra laisvos vietos.
- “ lankstus susitraukimas-0 ” klasė neleidžia lanksčiam daiktui susitraukti ir mažėti lankstaus konteinerio viduje, kai vietos nepakanka.
- “ lankstus augimas “ klasė leidžia lanksčiam daiktui augti ir užimti laisvą erdvę lankstaus konteinerio viduje.
- “ lankstus-susitraukiantis “ klasė leidžia lanksčiam daiktui susitraukti, jei lanksčiame konteineryje nėra pakankamai vietos.
2 veiksmas: patikrinkite išvestį
Peržiūrėkite HTML tinklalapį ir pakeiskite ekrano dydį, kad įsitikintumėte, jog norimi lankstieji elementai negali augti ir susitraukti:
Aukščiau pateikta išvestis rodo, kad lankstus elementas „2“ nesusitraukia esant nepakankamai erdvei, o elementas „1“ neauga laisvoje erdvėje. Tai rodo, kad norimiems lankstiems daiktams buvo užkirstas kelias augti ir susitraukti.
Išvada
Kad lankstieji elementai neaugtų ir nesusitrauktų tailwind metu, naudokite „ lankstus augimas-0 “ ir „ lankstus susitraukimas-0 “ komunalinės paslaugos su norimais flex elementais HTML programoje. Norėdami patikrinti, pakeiskite ir peržiūrėkite HTML tinklalapio ekrano dydį. Šis įrašas parodė metodą, leidžiantį neleisti lanksčių elementų augti arba susitraukti naudojant Tailwind CSS.