Tailwind CSS ger ' align-objekt ” verktyg för att kontrollera positionen för flex- och rutnätsartiklar längs behållarens tväraxel. Den har olika verktygsklasser, såsom 'artiklar-start', 'artiklar-center', 'artiklar-slut', 'artiklar-baslinje', etc. Dessutom kan användare också använda hovringsegenskapen med 'artiklar-
Den här artikeln kommer att exemplifiera metoden för att applicera hovringen på align-items”-verktyg i Tailwind CSS.
Hur applicerar man Hover på 'align-items' Utilities i Tailwind?
För att tillämpa hovringen på verktygen 'align-items' i Tailwind, skapa en HTML-struktur och lägg till ' sväva ' nyttoklass med önskad ' objekt-
Syntax
< element klass = 'hover:objekt-
Ersätt
Exempel
I det här exemplet kommer vi att göra en flexbehållare med egenskapen 'items-start'. Sedan kommer vi att använda ' hover:items-center ' klass i ' Produktion För att tillämpa svävningseffekten på verktygen 'align-items' i Tailwind, använd ' sväva ' nyttoklass med den särskilda ' objekt-
< kropp >
< div klass = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div klass = 'bg-pink-600 py-4 w-40' > 1 div >
< div klass = 'bg-pink-600 py-12 w-40' > 2 div >
< div klass = 'bg-pink-600 py-8 w-40' > 3 div >
div >
kropp >
Här:
Från ovanstående webbsida kan det observeras att inriktningen av flexföremålen förändras längs behållarens tväraxel vid hovring. Slutsats