Ta članek bo razložil metodo za nastavitev flex-basis v Tailwind CSS.
Kako nastaviti Flex Basis v zadnjem vetru?
Če želite nastaviti flex-basis v Tailwind CSS, naredite datoteko HTML. Nato uporabite » osnova-
Oglejte si podane korake za praktično predstavitev:
1. korak: Nastavite Flex Basis v programu HTML
Naredite program HTML in uporabite » osnova-
< telo >
< div razred = 'flex h-20' >
< div razred = 'osnova-1/4 bg-rdeča-400 m-1' > 1 < / div >
< div razred = 'basis-1/3 bg-teal-400 m-1' > 2 < / div >
< div razred = 'basis-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / telo >
Tukaj:
- “ flex ” se uporablja za ustvarjanje prilagodljive postavitve in prilagajanje velikosti podrejenega elementa glede na razpoložljivi prostor.
- “ h-20 ” nastavi višino na 20 enot.
- “ osnova-1/4 ” nastavi širino notranjega elementa
na 25 % njegovega nadrejenega elementa.- “ osnova-1/3 ” nastavi širino notranjega
na 33,33 % njegovega nadrejenega vsebnika.- “ osnova-1/2 ” nastavi širino
na 50 % nadrejenega vsebnika.- “ bg-rdeča-400 ” uporabi rdečo barvo ozadja za
.- “ bg-teal-400 ” nastavi modrozeleno barvo za ozadje
.- “ bg-oranžna-400 ” uporabi oranžno barvo ozadja za
.- “ m-1 ” doda rob 1 enote okoli vsakega elementa
.2. korak: Preverite izhod
Če želite zagotoviti, da je flex-basis nastavljen in pravilno deluje, si oglejte spletno stran HTML:
V zgornjem rezultatu je mogoče videti flex-basis, v skladu s katerim so bili oblikovani.
Zaključek
Flex basis uporabnikom omogoča ustvarjanje prilagodljivih postavitev, ki se prilagajajo različnim velikostim in ločljivostim zaslona. Za nastavitev flex-basis v Tailwind CSS, ' osnova-
” Razred pripomočkov se uporablja v programu HTML. Uporabniki morajo določiti velikost elementa flex in zagotoviti spremembe z ogledom spletne strani. V tem članku je razložena metoda za nastavitev flex-basis v Tailwind CSS. - “ osnova-1/4 ” nastavi širino notranjega elementa