Tailwind CSS pakub ' joondada-üksused ” utiliidid painduvate ja ruudustikuelementide asukoha reguleerimiseks piki konteineri risttelge. Sellel on mitmesugused utiliidiklassid, nagu 'üksuste algus', 'üksuste keskus', 'üksuste lõpp', 'üksused-baasline' jne. Lisaks saavad kasutajad kasutada hõljutusatribuuti koos 'üksused-
See artikkel illustreerib Tailwind CSS-i utiliitide joondamise üksuste hõljutamise meetodit.
Kuidas rakendada hõljurit Tailwindis „üksuste joondamise” utiliitidele?
Tailwindi utiliitidele „align-items” hõljutamiseks looge HTML-struktuur ja lisage „ hõljuma ' kasuliku klass soovitud ' üksused-
Süntaks
< element klass = 'hover:items-
Asendage
Näide
Selles näites loome painduva konteineri atribuudiga „ITEMS-start”. Seejärel kasutame ' hõljutage: esemete keskus ' klassis ' Väljund Hõljutusefekti rakendamiseks Tailwindi utiliitidele „joonda üksused”, kasutage „ hõljuma ' kasuliku klass konkreetse ' üksused-
< keha >
< div klass = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div klass = 'bg-pink-600 py-4 w-40' > 1 div >
< div klass = 'bg-pink-600 py-12 w-40' > 2 div >
< div klass = 'bg-pink-600 py-8 w-40' > 3 div >
div >
keha >
Siin:
Ülaltoodud veebilehelt on näha, et painduvate elementide joondus muutub piki konteineri risttelge hõljumisel. Järeldus