Tailwind CSS bietet „ align-items „Dienstprogramme zur Steuerung der Position von Flex- und Grid-Elementen entlang der Querachse des Containers. Es verfügt über verschiedene Dienstprogrammklassen wie „items-start“, „items-center“, „items-end“, „items-baseline“ usw. Darüber hinaus können Benutzer die Hover-Eigenschaft auch mit „items-
In diesem Artikel wird die Methode zum Anwenden des Hovers auf „align-items“-Dienstprogramme in Tailwind CSS erläutert.
Wie wende ich Hover auf „align-items“-Dienstprogramme in Tailwind an?
Um den Hover auf die „align-items“-Dienstprogramme in Tailwind anzuwenden, erstellen Sie eine HTML-Struktur und fügen Sie das „ schweben „Dienstprogrammklasse mit dem gewünschten“ items-
Syntax
< Element Klasse = „hover:items-
Ersetzen Sie
Beispiel
In diesem Beispiel erstellen wir einen Flex-Container mit der Eigenschaft „items-start“. Dann verwenden wir das „ hover:items-center ” Klasse in der „ Ausgang Um den Hover-Effekt auf die „align-items“-Dienstprogramme in Tailwind anzuwenden, verwenden Sie die Option „ schweben ” Utility-Klasse mit dem besonderen „ items-
< Körper >
< div Klasse = „flex items-start hover:items-center 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 >
Körper >
Hier:
Auf der obigen Webseite ist zu erkennen, dass sich die Ausrichtung der Flex-Elemente beim Schweben entlang der Querachse des Containers ändert. Abschluss