Tailwind CSS tarjoaa ' kohdista kohteet ” apuohjelmat, joilla ohjataan flex- ja grid-kohteiden sijaintia säiliön poikkiakselilla. Siinä on useita hyödyllisyysluokkia, kuten 'items-start', 'items-center', 'items-end', 'items-baseline' jne. Lisäksi käyttäjät voivat käyttää hover-ominaisuutta myös komennolla 'items-
Tämä artikkeli on esimerkki menetelmästä, jolla hiiren osoitinta käytetään align-items” -apuohjelmissa Tailwind CSS:ssä.
Kuinka soveltaa Hover-toimintoa 'kohdistaa kohteita' -apuohjelmiin Tailwindissä?
Jos haluat käyttää osoitinta Tailwindin 'align-items' -apuohjelmissa, luo HTML-rakenne ja lisää ' leijuu 'hyötyluokka halutulla' kohteet-
Syntaksi
< elementti luokkaa = 'hover:items-
Korvaa
Esimerkki
Tässä esimerkissä teemme joustavan säiliön, jonka ominaisuus on 'items-start'. Sitten käytämme ' hover:items-center 'luokassa' Lähtö Käytä hover-tehostetta Tailwindin 'align-items' -apuohjelmiin leijuu ”hyötyluokka tietyllä ” kohteet-
< kehon >
< div luokkaa = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div luokkaa = 'bg-pink-600 py-4 w-40' > 1 div >
< div luokkaa = 'bg-pink-600 py-12 w-40' > 2 div >
< div luokkaa = 'bg-pink-600 py-8 w-40' > 3 div >
div >
kehon >
Tässä:
Yllä olevalta verkkosivulta voidaan havaita, että taipuvien kohteiden kohdistus muuttuu säiliön poikkiakselia pitkin leijuttaessa. Johtopäätös