Nag-aalok ang Tailwind CSS ng iba't ibang ' align-item ” mga utility upang kontrolin ang posisyon ng flex at grid na mga item sa kahabaan ng cross-axis ng container. Kasama sa mga utility class na ito ang 'mga item-start', 'item-center', 'item-end', 'item-baseline', at 'item-stretch'. Bukod dito, magagamit din ng mga user ang mga breakpoint at media query sa utility na 'item-
Ipapakita ng artikulong ito ang paraan ng paglalapat ng mga breakpoint at mga query sa media sa mga utility na 'align-item' sa Tailwind.
Paano Mag-apply ng Mga Breakpoint at Mga Query sa Media Gamit ang 'align-item' sa Tailwind?
Para ilapat ang mga gustong breakpoint at mga query sa media sa mga utility na 'justify-content' sa Tailwind, gumawa ng HTML structure. Pagkatapos nito, tukuyin ang partikular na halaga sa ' mga item-
Halimbawa
Sa halimbawang ito, gagawa kami ng flex container na may property na 'mga item-start'. Gagamitin natin ang ' md 'breakpoint na may' item-center 'utilidad at' lg 'breakpoint na may' item-end 'utilidad sa' Output Para sa paglalapat ng mga breakpoint at mga query sa media na may mga utility na 'align-item' sa Tailwind, tukuyin ang nais na halaga sa ' mga item-
< katawan >
< div klase = 'flex item-start md:item-center lg:item-end 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:
Ipinapakita ng output sa itaas na nagbabago ang vertical alignment ng mga flex na item habang nag-iiba-iba ang laki ng screen. Ipinapahiwatig nito na ang mga tinukoy na breakpoint at mga query sa media ay epektibong nailapat sa utility na 'align-item'. Konklusyon