Flexbox eller flex container er et oppsett som gjør det mulig for brukere å justere og distribuere elementer i en container. Tailwind CSS tilbyr ulike verktøyklasser for å lage og jobbe med flexbox. En boks-nivå flex container er en flex container som oppfører seg/fungerer som et blokk-nivå element og lager en blokk. Den tar opp hele bredden til overordnet element og lager en ny linje etter seg selv.
Denne oppskriften vil eksemplifisere metoden for å lage en fleksibel beholder på blokknivå i Tailwind.
Hvordan lage/lage en Flex-beholder på blokknivå i medvind?
For å lage en bestemt blokknivå flex container i Tailwind, lag en HTML-struktur. Deretter legger du til ' bøye seg ” verktøyklassen med ønsket
Syntaks
< div klasse = 'fleks...' >
...
div >
Kode
< kropp >
< div klasse = 'flex gap-2 m-2 kant-2 kant-svart' >
< div klasse = 'bg-yellow-500 p-4' > Første element div >
< div klasse = 'bg-yellow-500 p-4' > Andre element div >
< div klasse = 'bg-yellow-500 p-4' > Tredje element div >
div >
kropp >
Her, i den overordnede
-
- ' bøye seg Klasse brukes til å lage en fleksibel beholder på blokknivå.
- ' gap-2 ” klasse legger til 2 enheter med avstand mellom flexs underordnede elementer.
- ' m-2 ”-klassen legger til 2 marginenheter på alle sider av beholderen.
- ' grense-2 ” klasse legger til rammen til beholderen med 2 enheter bredde.
- ' kant-svart ” klasse setter kantfargen til svart.
I barneflekselementene:
-
- ' bg-gul-500 ”-klassen bruker en gul farge på flex-elementets bakgrunn.
- ' s-4 ”-klassen legger til polstring av 4 enheter på alle sider av flex-elementene.
Produksjon
I utgangen ovenfor representerer grensen at beholderen er en fleksibel beholder på blokknivå, som opptar hele bredden av det overordnede elementet (nettleseren).
Alternativt kan brukeren sikre dette ved å inspisere flex container-elementet på nettsiden:
Ovennevnte utdata indikerer at beholderen er en fleksibel beholder på blokknivå.
Konklusjon:
For å lage en fleksibel beholder på blokknivå i Tailwind, er det nødvendig å legge til ' bøye seg ”-verktøyklassen med den bestemte beholderen og spesifiser dens underordnede elementer. Brukere kan definere og endre fleksible elementer i henhold til deres behov. For verifisering, legg til kantlinjen til beholderen og se nettsiden eller inspiser det elementet på nettsiden. Denne artikkelen har forklart metoden for å lage en fleksibel beholder på blokknivå i Tailwind.