Šiame straipsnyje bus paaiškintas lankstumo nustatymo metodas Tailwind CSS.
Kaip nustatyti „Flex Basis“ tailwind?
Norėdami nustatyti lanksčią bazę Tailwind CSS, sukurkite HTML failą. Tada naudokite „ pagrindas-
Peržiūrėkite pateiktus praktinio demonstravimo veiksmus:
1 veiksmas: HTML programoje nustatykite „Flex Basis“.
Sukurkite HTML programą ir naudokite „ pagrindas-
< kūnas >
< div klasė = 'flex h-20' >
< div klasė = 'basis-1/4 bg-red-400 m-1' > 1 < / div >
< div klasė = 'basis-1/3 bg-teal-400 m-1' > 2 < / div >
< div klasė = 'basis-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / kūnas >
Čia:
- “ lankstus “ klasė naudojama norint sukurti lankstų išdėstymą ir koreguoti antrinio elemento dydžius pagal turimą erdvę.
- “ h-20 ” klasė nustato aukštį į 20 vienetų.
- “ pagrindas-1/4 ” klasė nustato vidinio
elemento plotį iki 25 % pirminio elemento.- “ pagrindas-1/3 ” klasė nustato vidinės
plotį iki 33,33 % pirminio sudėtinio rodinio.- “ pagrindas-1/2 ” klasė nustato
plotį iki 50 % pirminio sudėtinio rodinio.- “ bg-red-400 ” klasė taiko raudoną fono spalvą
.- “ bg-teal-400 “ klasė nustato melsvą spalvą į
foną.- “ bg-orange-400 ” klasė taiko oranžinę fono spalvą
.- “ m-1 ” klasė aplink kiekvieną
elementą prideda 1 vieneto paraštę.2 veiksmas: patikrinkite išvestį
Norėdami įsitikinti, kad lankstus pagrindas buvo nustatytas ir tinkamai veikia, peržiūrėkite HTML tinklalapį:
Aukščiau pateiktame išvestyje galima pamatyti lankstų pagrindą, pagal kurį jie buvo sukurti.
Išvada
„Flex Base“ leidžia vartotojams kurti lanksčius maketus, prisitaikančius prie įvairių ekrano dydžių ir skiriamųjų gebų. Norėdami nustatyti lanksčią bazę Tailwind CSS, „ pagrindas-
” HTML programoje naudojama naudingumo klasė. Vartotojai turi nurodyti lanksčios prekės dydį ir užtikrinti pakeitimus peržiūrėdami tinklalapį. Šiame straipsnyje paaiškintas lankstumo nustatymo metodas Tailwind CSS. - “ pagrindas-1/4 ” klasė nustato vidinio