Flexbox eller flex container er et layout, der gør det muligt for brugere at justere og distribuere elementer i en container. Tailwind CSS tilbyder forskellige hjælpeklasser til at skabe og arbejde med flexbox. En flexcontainer på kasseniveau er en flexbeholder, der opfører sig/fungerer som et blokniveauelement og skaber en blok. Den optager hele sit overordnede elements bredde og laver en ny linje efter sig selv.
Denne opskrivning vil eksemplificere metoden til at skabe en blok-niveau flex container i Tailwind.
Hvordan opretter/laver man en Flex-container på blokniveau i medvind?
For at oprette en bestemt blok-niveau flex container i Tailwind, lav en HTML-struktur. Tilføj derefter ' bøje ” hjælpeklasse med den ønskede
Syntaks
< div klasse = 'fleks...' >
...
div >
Kode
< legeme >
< div klasse = 'flex gap-2 m-2 border-2 border-sort' >
< div klasse = 'bg-yellow-500 p-4' > Første vare div >
< div klasse = 'bg-yellow-500 p-4' > Anden vare div >
< div klasse = 'bg-yellow-500 p-4' > Tredje punkt div >
div >
legeme >
Her i den overordnede
-
- “ bøje ” klasse bruges til at skabe en blok-niveau flex container.
- “ mellemrum-2 ” klasse tilføjer 2 enheder mellemrum mellem flexs underordnede elementer.
- “ m-2 ” klasse tilføjer 2 enheder margen til containerens alle sider.
- “ grænse-2 ” klasse tilføjer grænsen til containeren med 2 enheder bredde.
- “ kant-sort ” klasse indstiller kantfarven til sort.
I barnets flexelementer:
-
- “ bg-gul-500 ”-klassen anvender en gul farve på flex-elementets baggrund.
- “ p-4 ” klasse tilføjer polstring af 4 enheder til alle sider af flex-emnerne.
Produktion
I ovenstående output repræsenterer grænsen, at beholderen er en flexbeholder på blokniveau, som optager hele bredden af dets overordnede element (browser).
Alternativt kan brugeren sikre dette ved at inspicere flex container-elementet på websiden:
Ovenstående output indikerer, at beholderen er en flexbeholder på blokniveau.
Konklusion:
For at oprette en flexcontainer på blokniveau i Tailwind, er det nødvendigt at tilføje ' bøje ” hjælpeklasse med den bestemte beholder og angiv dens underordnede elementer. Brugere kan definere og ændre flexvarer i henhold til deres behov. Til bekræftelse skal du tilføje grænsen til containeren og se websiden eller inspicere det element på websiden. Denne artikel har forklaret metoden til at skabe en flexcontainer på blokniveau i Tailwind.