Tailwind CSS nabízí různé „ zarovnat-položky ” nástroje pro ovládání polohy ohebných a mřížkových položek podél příčné osy kontejneru. Tyto pomocné třídy zahrnují „items-start“, „items-center“, „items-end“, „items-baseline“ a „items-stretch“. Kromě toho mohou uživatelé také využít body přerušení a dotazy na média v obslužném programu „items-
Tento článek demonstruje metodu použití bodů přerušení a dotazů na média na nástroje „align-items“ v Tailwindu.
Jak použít zarážky a dotazy na média s „align-items“ v Tailwindu?
Chcete-li použít požadované body přerušení a dotazy na média na nástroje „justify-content“ v Tailwindu, vytvořte strukturu HTML. Poté definujte konkrétní hodnotu pro „ položky-
Příklad
V tomto příkladu vytvoříme flex kontejner s vlastností „items-start“. Budeme používat „ md 'bod přerušení s ' centrum položek 'utilita a' lg 'bod přerušení s ' položky-konec ” nástroj v “ Výstup Chcete-li použít body přerušení a dotazy na média pomocí nástrojů „align-items“ v Tailwindu, definujte požadovanou hodnotu pro „ položky-
< tělo >
< div třída = 'flex items-start md:items-center lg:items-end 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:
Výše uvedený výstup ukazuje, že vertikální zarovnání flexibilních položek se mění s měnící se velikostí obrazovky. To znamená, že zadané body přerušení a dotazy na média byly efektivně použity pomocí nástroje „align-items“. Závěr