Tailwind CSS oferă „ alinierea elementelor ” utilități pentru a controla poziția articolelor flexibile și grid de-a lungul axei transversale a containerului. Are diverse clase de utilitate, cum ar fi „items-start”, „items-center”, „items-end”, „items-baseline”, etc. În plus, utilizatorii pot utiliza și proprietatea hover cu „items-
Acest articol va exemplifica metoda de aplicare a utilităților „hover on align-items” în Tailwind CSS.
Cum se aplică Hover pe utilitarele „align-items” în Tailwind?
Pentru a aplica cursorul pe utilitățile „align-items” din Tailwind, creați o structură HTML și adăugați „ planare „clasa de utilitate cu „ articole-
Sintaxă
< element clasă = „hover:items-
Înlocuiți
Exemplu
În acest exemplu, vom realiza un container flexibil cu proprietatea „items-start”. Apoi, vom folosi „ hover:items-center ” clasa ” în ” Ieșire Pentru a aplica efectul de hover asupra utilităților „aliniere-articole” din Tailwind, utilizați „ planare „clasa de utilitate cu specificul „ articole-
< corp >
< div clasă = „flex item-start hover:items-center justificare-around text-center h-44 m-3 bg-roz-300 gap-4” >
< div clasă = „bg-roz-600 py-4 w-40” > 1 div >
< div clasă = „bg-roz-600 py-12 w-40” > 2 div >
< div clasă = „bg-roz-600 py-8 w-40” > 3 div >
div >
corp >
Aici:
Din pagina web de mai sus, se poate observa că alinierea elementelor flexibile se schimbă de-a lungul axei transversale a containerului la hover. Concluzie