A Tailwind CSS különféle ' align-ites ” segédprogramok a flexibilis és rácselemek helyzetének szabályozására a tartály kereszttengelye mentén. Ezek a segédosztályok tartalmazzák az „elemek kezdete”, „elemek központja”, „elemek vége”, „elemek alapvonala” és „elemek nyújtása”. Ezenkívül a felhasználók az „elemek-<érték>” segédprogram töréspontjait és médialekérdezéseit is használhatják a flexibilis vagy rácselemek helyzetének megváltoztatására a tároló kereszttengelye mentén különböző képernyőméreteken.
Ez a cikk bemutatja a töréspontok és médialekérdezések alkalmazásának módszerét a Tailwind „elemek igazítása” segédprogramjain.
Hogyan lehet töréspontokat és médialekérdezéseket alkalmazni „igazított elemek” esetén a Tailwindben?
Ha a kívánt töréspontokat és médialekérdezéseket szeretné alkalmazni a Tailwind „justify-content” segédprogramjaira, hozzon létre egy HTML-struktúrát. Ezt követően adja meg a konkrét értéket a ' tételek-<érték> ” segédprogram különféle képernyőméretekhez a „ md ” vagy „ lg ” töréspontok. Végül az ellenőrzéshez módosítsa a weboldal képernyőméretét.
Példa
Ebben a példában egy rugalmas tárolót fogunk létrehozni az „items-start” tulajdonsággal. A ' md ' töréspont a ' tételek központja ' segédprogram és ' lg ' töréspont a ' tételek végét ' segédprogram a ' Kimenet Ha töréspontokat és médialekérdezéseket szeretne alkalmazni a Tailwind „align-items” segédprogramjaival, adja meg a kívánt értéket a „ tételek-<érték> ” segédprogram különféle képernyőméretekhez a „ md ” vagy „ lg ” töréspontok. Az ellenőrzéshez módosítsa a weboldal képernyőméretét, és gondoskodjon a változtatásokról. Ez a cikk azt a példát szemlélteti, hogy konkrét töréspontokat és médialekérdezéseket alkalmazhat a Tailwind „elemek igazítása” segédprogramjain.
< test >
< div osztály = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div osztály = 'bg-pink-600 py-4 w-40' > 1 div >
< div osztály = 'bg-pink-600 py-12 w-40' > 2 div >
< div osztály = 'bg-pink-600 py-8 w-40' > 3 div >
div >
test >
Itt:
A fenti kimenet azt mutatja, hogy a flex elemek függőleges igazítása a képernyő méretének változásával változik. Ez azt jelzi, hogy a megadott töréspontokat és adathordozó-lekérdezéseket hatékonyan alkalmazták az „align-items” segédprogrammal. Következtetés