Ang Tailwind CSS ay nagbibigay ng “ align-item ” mga utility upang kontrolin ang posisyon ng flex at grid na mga item sa kahabaan ng cross-axis ng container. Mayroon itong iba't ibang klase ng utility, gaya ng 'mga item-start', 'item-center', 'item-end', 'item-baseline', atbp. Higit pa rito, maaari ding gamitin ng mga user ang hover property na may 'item-
Ipapakita ng artikulong ito ang paraan ng paglalapat ng hover sa align-item” na mga utility sa Tailwind CSS.
Paano Mag-apply ng Hover sa Mga Utility ng 'align-items' sa Tailwind?
Para ilapat ang hover sa mga utility na 'align-item' sa Tailwind, gumawa ng HTML structure at idagdag ang ' hover ' utility class na may nais na ' mga item-
Syntax
< elemento klase = 'hover:items-
Palitan ang
Halimbawa
Sa halimbawang ito, gagawa kami ng flex container na may property na 'mga item-start'. Pagkatapos, gagamitin natin ang ' hover:item-center 'klase sa' Output Para sa paglalapat ng hover effect sa mga utility na 'align-item' sa Tailwind, gamitin ang ' hover ' utility class na may partikular na ' mga item-
< katawan >
< div klase = 'flex item-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div klase = 'bg-pink-600 py-4 w-40' > 1 div >
< div klase = 'bg-pink-600 py-12 w-40' > 2 div >
< div klase = 'bg-pink-600 py-8 w-40' > 3 div >
div >
katawan >
dito:
Mula sa web page sa itaas, mapapansing nagbabago ang pagkakahanay ng mga flex na item sa kahabaan ng cross-axis ng container sa hover. Konklusyon