Denne artikel vil forklare metoden til at indstille flex-basis i Tailwind CSS.
Hvordan indstiller man Flex Basis i medvind?
For at indstille flex-basis i Tailwind CSS, lav en HTML-fil. Brug derefter ' basis-
Se på de givne trin for en praktisk demonstration:
Trin 1: Indstil Flex Basis i HTML-programmet
Lav et HTML-program og brug ' basis-
< legeme >
< div klasse = 'flex h-20' >
< div klasse = 'basis-1/4 bg-rød-400 m-1' > 1 < / div >
< div klasse = 'basis-1/3 bg-teal-400 m-1' > 2 < / div >
< div klasse = 'basis-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / legeme >
Her:
- “ bøje ” klasse bruges til at skabe et fleksibelt layout og justere underelementets størrelser baseret på tilgængelig plads.
- “ h-20 ” klasse indstiller højden på til 20 enheder.
- “ basis-1/4 ” klasse indstiller det indre
-elements bredde til 25 % af dets overordnede element.- “ basis-1/3 ” klasse indstiller bredden af den indre
til 33,33 % af dens overordnede container.- “ basis-1/2 ” klasse indstiller
s bredde til 50 % af dens overordnede container.- “ bg-rød-400 ” klasse anvender en rød baggrundsfarve på
.- “ bg-teal-400 ” klasse indstiller den blågrønne farve til
s baggrund.- “ bg-orange-400 ” klasse anvender den orange baggrundsfarve på
.- “ m-1 ” klasse tilføjer en margen på 1 enhed omkring hvert
-element.Trin 2: Bekræft output
For at sikre, at flex-grundlaget er indstillet og fungerer korrekt, se HTML-websiden:
I ovenstående output kan flex-grundlaget ses efter hvilken de blev stylet.
Konklusion
Flex basis giver brugerne mulighed for at skabe fleksible layouts, der tilpasser sig forskellige skærmstørrelser og opløsninger. For at indstille flex-basis i Tailwind CSS, ' basis-
” utility class bruges i HTML-programmet. Brugere skal angive flexvarestørrelsen og sikre ændringerne ved at se websiden. Denne artikel har forklaret metoden til at indstille flex-basis i Tailwind CSS. - “ basis-1/4 ” klasse indstiller det indre