Tailwind CSS poskytuje „ zarovnat-položky ” nástroje pro ovládání polohy ohebných a mřížkových položek podél příčné osy kontejneru. Má různé pomocné třídy, jako je „items-start“, „items-center“, „items-end“, „items-baseline“ atd. Kromě toho mohou uživatelé také využít vlastnost hover s „items-
Tento článek bude příkladem metody použití nástrojů pro zarovnání položek v Tailwind CSS.
Jak použít ukazatel myši na nástroje „align-items“ ve službě Tailwind?
Chcete-li použít ukazatel myši na nástroje „align-items“ v Tailwindu, vytvořte strukturu HTML a přidejte „ vznášet se 'užitná třída s požadovaným' položky-
Syntax
< živel třída = 'hover:items-
Nahraďte
Příklad
V tomto příkladu vytvoříme flex kontejner s vlastností „items-start“. Poté použijeme „ hover:items-center “ třídy v “ Výstup Chcete-li použít efekt přechodu na nástroje „align-items“ v Tailwindu, použijte „ vznášet se 'užitná třída s konkrétním' položky-
< tělo >
< div třída = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div třída = 'bg-pink-600 py-4 w-40' > 1 div >
< div třída = 'bg-růžová-600 py-12 w-40' > 2 div >
< div třída = 'bg-pink-600 py-8 w-40' > 3 div >
div >
tělo >
Tady:
Z výše uvedené webové stránky lze pozorovat, že zarovnání pružných položek se mění podél křížové osy kontejneru při umístění kurzoru. Závěr