Den här artikeln kommer att förklara metoden för att ställa in flex-basen i Tailwind CSS.
Hur ställer man in flexbas i medvind?
För att ställa in flex-basen i Tailwind CSS, skapa en HTML-fil. Använd sedan ' bas-
Titta på de angivna stegen för en praktisk demonstration:
Steg 1: Ställ in Flex Basis i HTML-programmet
Skapa ett HTML-program och använd ' bas-
< kropp >
< div klass = 'flex h-20' >
< div klass = 'basis-1/4 bg-röd-400 m-1' > 1 < / div >
< div klass = 'bas-1/3 bg-teal-400 m-1' > 2 < / div >
< div klass = 'basis-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / kropp >
Här:
- ' böja Klass används för att skapa en flexibel layout och anpassa storleken på det underordnade elementet baserat på tillgängligt utrymme.
- ' h-20 ” klass ställer in höjden på till 20 enheter.
- ' bas-1/4 ” klass ställer in det inre
-elementets bredd till 25 % av dess överordnade element.- ' bas-1/3 ” klass ställer in bredden på den inre
till 33,33 % av dess överordnade behållare.- ' bas-1/2 ” klass anger
s bredd till 50 % av dess överordnade behållare.- ' bg-röd-400 ” klass tillämpar en röd bakgrundsfärg på
.- ' bg-teal-400 ” klass ställer in den kricka färgen till
s bakgrund.- ' bg-orange-400 ” klass tillämpar den orange bakgrundsfärgen på
.- ' m-1 ” klass lägger till en marginal på 1 enhet runt varje
-element.Steg 2: Verifiera utdata
För att säkerställa att flex-basen har ställts in och fungerar korrekt, se HTML-webbsidan:
I ovanstående utgång kan flex-basen ses enligt vilken de utformades.
Slutsats
Flex basis gör det möjligt för användare att skapa flexibla layouter som anpassar sig till olika skärmstorlekar och upplösningar. För att ställa in flex-basen i Tailwind CSS, ' bas-
” utility class används i HTML-programmet. Användare måste ange flexobjektets storlek och säkerställa ändringarna genom att titta på webbsidan. Den här artikeln har förklarat metoden för att ställa in flex-basen i Tailwind CSS. - ' bas-1/4 ” klass ställer in det inre