A Tailwind CSS biztosítja align-ites ” segédprogramok a flexibilis és rácselemek helyzetének szabályozására a tartály kereszttengelye mentén. Különféle segédosztályokkal rendelkezik, mint például „elemek kezdete”, „elemek központja”, „elemek vége”, „elemek-alapvonal” stb. Ezen túlmenően a felhasználók használhatják a hover tulajdonságot az „items-
Ez a cikk példát mutat be a Tailwind CSS-ben az align-items” segédprogramokon való hover alkalmazásának módjára.
Hogyan alkalmazzuk a Hover-t az „elemek igazítási” segédprogramjaira a Tailwindben?
Ha alkalmazni szeretné az egérmutatót a Tailwind „align-items” segédprogramjaira, hozzon létre egy HTML-struktúrát, és adja hozzá a „ lebeg ' használati osztály a kívánt ' tételek-<érték> ” segédprogram a tartályban. Ezután nézze meg a HTML-weboldalt, és mutassa az egeret a megadott elemre a változtatások ellenőrzéséhez.
Szintaxis
< elem osztály = 'hover:items-
Cserélje ki az <érték> értéket a következő opciók egyikére: „kezdet”, „közép”, „vég”, „alapvonal” vagy „nyújtás”.
Példa
Ebben a példában egy rugalmas tárolót fogunk készíteni az „items-start” tulajdonsággal. Ezután a „ hover:items-center ' osztály a ' Kimenet A lebegési effektus alkalmazásához a Tailwind „align-items” segédprogramjaira használja a „ lebeg ' használati osztály az adott ' tételek-<érték> ” segédprogram a flex vagy grid tartályban. Az ellenőrzéshez vigye az egeret a megadott tároló fölé a weboldalon. Ez a cikk példákat mutat be a hover effektus alkalmazására a Tailwind „elemek igazítása” segédprogramjaira.
< test >
< div osztály = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div osztály = 'bg-pink-600 py-4 w-40' > 1 div >
< div osztály = 'bg-pink-600 py-12 w-40' > 2 div >
< div osztály = 'bg-pink-600 py-8 w-40' > 3 div >
div >
test >
Itt:
A fenti weboldalról megfigyelhető, hogy a flexiós elemek igazítása a konténer kereszttengelye mentén változik lebegtetés közben. Következtetés