Ovaj će članak objasniti metodu postavljanja flex-basisa u Tailwind CSS-u.
Kako postaviti Flex Basis u Tailwind?
Za postavljanje flex-basisa u Tailwind CSS-u napravite HTML datoteku. Zatim upotrijebite ' osnova-
Pogledajte navedene korake za praktičnu demonstraciju:
Korak 1: Postavite Flex Basis u HTML programu
Napravite HTML program i upotrijebite ' osnova-
< tijelo >
< div razreda = 'flex h-20' >
< div razreda = 'osnova-1/4 bg-crvena-400 m-1' > 1 < / div >
< div razreda = 'basis-1/3 bg-teal-400 m-1' > 2 < / div >
< div razreda = 'basis-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / tijelo >
Ovdje:
- “ savijati ” klasa se koristi za stvaranje fleksibilnog izgleda i prilagođavanje veličina podređenog elementa na temelju dostupnog prostora.
- “ h-20 ” klasa postavlja visinu na 20 jedinica.
- “ osnova-1/4 ” postavlja unutarnju širinu
elementa na 25% njegovog nadređenog elementa.- “ osnova-1/3 ” klasa postavlja širinu unutarnjeg
-a na 33,33% nadređenog spremnika.- “ osnova-1/2 ” klasa postavlja širinu
-a na 50% nadređenog spremnika.- “ bg-crveno-400 ” primjenjuje crvenu boju pozadine na
.- “ bg-teal-400 ” postavlja plavozelenu boju na pozadinu
-a.- “ bg-narančasta-400 ” primjenjuje narančastu boju pozadine na
.- “ m-1 ” dodaje marginu od 1 jedinice oko svakog
elementa.Korak 2: Provjerite izlaz
Kako biste bili sigurni da je flex-basis postavljen i ispravno radi, pogledajte HTML web stranicu:
U gornjem izlazu može se vidjeti flex-osnova prema kojoj su oblikovani.
Zaključak
Flex osnova omogućuje korisnicima stvaranje fleksibilnih izgleda koji se prilagođavaju različitim veličinama i razlučivostima zaslona. Da biste postavili flex-basis u Tailwind CSS-u, ' osnova-
” klasa pomoćnih programa koristi se u HTML programu. Korisnici trebaju odrediti veličinu fleksibilne stavke i osigurati promjene pregledom web stranice. Ovaj je članak objasnio metodu postavljanja flex-basisa u Tailwind CSS-u. - “ osnova-1/4 ” postavlja unutarnju širinu