Tailwind CSS gir ' align-elementer ” verktøy for å kontrollere posisjonen til flex- og rutenettelementer langs containerens tverrakse. Den har ulike bruksklasser, for eksempel «varer-start», «varer-senter», «varer-slutt», «varer-grunnlinje», etc. Videre kan brukere også bruke hover-egenskapen med «varer-
Denne artikkelen vil eksemplifisere metoden for å bruke hover på align-items»-verktøy i Tailwind CSS.
Hvordan bruke hover på 'align-items'-verktøy i Tailwind?
For å bruke hover på «align-items»-verktøyene i Tailwind, lag en HTML-struktur og legg til « sveve ' bruksklasse med ønsket ' elementer-
Syntaks
< element klasse = 'hover:elementer-
Erstatt
Eksempel
I dette eksemplet vil vi lage en fleksibel beholder med egenskapen 'varer-start'. Deretter vil vi bruke ' hover:items-center '-klassen i ' Produksjon For å bruke hover-effekten på 'align-items'-verktøyene i Tailwind, bruk ' sveve ' nytteklasse med den spesielle ' elementer-
< kropp >
< div klasse = 'fleks elementer-start hover:elementer-senter rettferdiggjøre-rundt tekst-senter h-44 m-3 bg-rosa-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 >
kropp >
Her:
Fra nettsiden ovenfor kan det observeres at justeringen av flekselementene endrer seg langs beholderens tverrakse ved sveving. Konklusjon