Tailwind CSS fornisce ' align-elementi ” utilità per controllare la posizione degli elementi flessibili e della griglia lungo l'asse trasversale del contenitore. Ha varie classi di utilità, come 'items-start', 'items-center', 'items-end', 'items-baseline', ecc. Inoltre, gli utenti possono anche utilizzare la proprietà hover con 'items-
Questo articolo esemplifica il metodo di applicazione del passaggio del mouse sulle utilità 'align-items' in Tailwind CSS.
Come applicare il passaggio del mouse sulle utility 'align-items' in Tailwind?
Per applicare il passaggio del mouse sulle utilità 'align-items' in Tailwind, crea una struttura HTML e aggiungi ' librarsi ” classe di utilità con il desiderato “ elementi-
Sintassi
< elemento classe = 'hover:elementi-
Sostituisci
Esempio
In questo esempio, creeremo un contenitore flessibile con la proprietà 'items-start'. Quindi, useremo il ' hover:item-center ” classe nel “ Produzione Per applicare l'effetto hover sulle utilità 'align-items' in Tailwind, utilizzare il ' librarsi ” classe di utilità con il particolare “ elementi-
< corpo >
< div classe = 'elementi flessibili-avvia al passaggio del mouse:centro-oggetti giustifica-intorno al centro-testo h-44 m-3 bg-rosa-300 gap-4' >
< div classe = 'bg-rosa-600 py-4 w-40' > 1 div >
< div classe = 'bg-rosa-600 py-12 w-40' > 2 div >
< div classe = 'bg-rosa-600 py-8 w-40' > 3 div >
div >
corpo >
Qui:
Dalla pagina web di cui sopra, si può osservare che l'allineamento degli elementi flessibili sta cambiando lungo l'asse trasversale del contenitore al passaggio del mouse. Conclusione