Tailwind CSS tilbyder forskellige ' align-elementer ” hjælpeprogrammer til at kontrollere positionen af flex- og gitterelementer langs containerens tværakse. Disse hjælpeklasser inkluderer 'varer-start', 'varer-center', 'varer-slut', 'varer-baseline' og 'varer-stræk'. Desuden kan brugere også bruge brudpunkterne og medieforespørgslerne på 'items-
Denne artikel vil demonstrere metoden til at anvende breakpoints og medieforespørgsler på 'align-items'-værktøjerne i Tailwind.
Hvordan anvender man breakpoints og medieforespørgsler med 'align-items' i Tailwind?
For at anvende ønskede brudpunkter og medieforespørgsler på 'justify-content'-værktøjer i Tailwind, skal du oprette en HTML-struktur. Derefter skal du definere den specifikke værdi til ' varer-
Eksempel
I dette eksempel vil vi oprette en flexcontainer med egenskaben 'items-start'. Vi vil bruge ' md ' brudpunkt med ' varecenter ' nytte og ' lg ' brudpunkt med ' varer-ende ' værktøj i ' Produktion For at anvende breakpoints og medieforespørgsler med 'align-items'-værktøjer i Tailwind, skal du definere den ønskede værdi til ' varer-
< legeme >
< div klasse = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div klasse = 'bg-pink-600 py-4 w-40' > 1 div >
< div klasse = 'bg-pink-600 py-12 w-40' > 2 div >
< div klasse = 'bg-pink-600 py-8 w-40' > 3 div >
div >
legeme >
Her:
Ovenstående output viser, at den vertikale justering af flex-emnerne ændrer sig, efterhånden som skærmstørrelsen varierer. Dette indikerer, at de angivne brudpunkter og medieforespørgsler er blevet effektivt anvendt med værktøjet 'align-items'. Konklusion