Denne artikkelen vil forklare metoden for å sette flex-basis i Tailwind CSS.
Hvordan sette Flex Basis i medvind?
For å sette flex-basis i Tailwind CSS, lag en HTML-fil. Deretter bruker du ' basis-
Se på de gitte trinnene for en praktisk demonstrasjon:
Trinn 1: Sett Flex Basis i HTML-programmet
Lag et HTML-program og bruk ' basis-
< kropp >
< 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-oransje-400 m-1' > 3 < / div >
< / div >
< / kropp >
Her:
- ' bøye seg Klassen brukes til å lage en fleksibel layout og justere størrelsen på underelementets størrelse basert på tilgjengelig plass.
- ' h-20 ” klasse setter høyden på til 20 enheter.
- ' basis-1/4 klasse setter bredden til det indre
-elementet til 25 % av det overordnede elementet.- ' basis-1/3 ” klasse setter bredden på den indre
til 33,33 % av den overordnede beholderen.- ' basis-1/2 ” klasse setter
s bredde til 50 % av den overordnede beholderen.- ' bg-red-400 ”-klassen bruker en rød bakgrunnsfarge på
.- ' bg-teal-400 ”-klassen setter blågrønnfargen til
s bakgrunn.- ' bg-oransje-400 ”-klassen bruker den oransje bakgrunnsfargen på
.- ' m-1 ”-klassen legger til en margin på 1 enhet rundt hvert
-element.Trinn 2: Bekreft utdata
For å sikre at flex-grunnlaget er satt og fungerer som det skal, se HTML-nettsiden:
I utgangen ovenfor kan flex-grunnlaget sees i henhold til hvilken de ble stylet.
Konklusjon
Flex basis gjør det mulig for brukere å lage fleksible oppsett som tilpasser seg ulike skjermstørrelser og oppløsninger. For å angi flex-grunnlaget i Tailwind CSS, ' basis-
” utility class brukes i HTML-programmet. Brukere må spesifisere fleksvarestørrelsen og sikre endringene ved å se nettsiden. Denne artikkelen har forklart metoden for å sette flex-grunnlaget i Tailwind CSS. - ' basis-1/4 klasse setter bredden til det indre