Tailwind CSS poskytuje „ align-items ” nástroje na ovládanie polohy ohybných a mriežkových položiek pozdĺž priečnej osi kontajnera. Má rôzne pomocné triedy, ako napríklad „items-start“, „items-center“, „items-end“, „items-baseline“ atď. Okrem toho môžu používatelia využiť aj vlastnosť hover s „items-
Tento článok bude príkladom spôsobu použitia pomôcok pre zarovnanie položiek v Tailwind CSS.
Ako použiť kurzor myši na nástroje „align-items“ v Tailwinde?
Ak chcete použiť kurzor myši na nástroje „align-items“ v Tailwinde, vytvorte štruktúru HTML a pridajte „ vznášať sa 'úžitková trieda s požadovaným' položky-
Syntax
< element trieda = 'hover:items-
Nahraďte
Príklad
V tomto príklade vytvoríme flexibilný kontajner s vlastnosťou „items-start“. Potom použijeme „ hover:items-center “trieda v “ Výkon Ak chcete použiť efekt ukazovania na nástroje „align-items“ v Tailwinde, použite „ vznášať sa „úžitková trieda s konkrétnym“ položky-
< telo >
< div trieda = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div trieda = 'bg-pink-600 py-4 w-40' > 1 div >
< div trieda = 'bg-pink-600 py-12 w-40' > 2 div >
< div trieda = 'bg-pink-600 py-8 w-40' > 3 div >
div >
telo >
Tu:
Z vyššie uvedenej webovej stránky je možné pozorovať, že zarovnanie ohybných položiek sa mení pozdĺž krížovej osi kontajnera pri vznášaní sa. Záver