Kaip pritaikyti lūžio taškus ir medijos užklausas naudojant „sulyginti elementus“ „Tailwind“?

Tailwind CSS siūlo įvairius išlyginti elementus “ komunalinės paslaugos, skirtos valdyti lanksčių ir tinklelio elementų padėtį išilgai konteinerio skersinės ašies. Šios naudingumo klasės apima „elementų pradžia“, „elementų centras“, „elementų pabaiga“, „elementai-baseline“ ir „elementai-tempimas“. Be to, vartotojai taip pat gali naudoti lūžio taškus ir medijos užklausas, esančias programoje „elementai-“, norėdami pakeisti lankstaus arba tinklelio elemento padėtį išilgai konteinerio skersinės ašies skirtingų dydžių ekranuose.

Šiame straipsnyje bus parodytas lūžio taškų ir medijos užklausų taikymo metodas „Tailwind“ elementų suderinimo priemonėms.

Kaip pritaikyti lūžio taškus ir medijos užklausas naudojant „sulyginti elementus“ „Tailwind“?

Norėdami pritaikyti norimus lūžio taškus ir medijos užklausas „Pagrindinio turinio“ paslaugų programoms „Tailwind“, sukurkite HTML struktūrą. Po to nustatykite konkrečią reikšmę „ elementai- “ įrankis, skirtas įvairių dydžių ekranams naudojant “ md “ arba „ lg “ lūžio taškai. Galiausiai, norėdami patikrinti, pakeiskite tinklalapio ekrano dydį.

Pavyzdys

Šiame pavyzdyje sukursime lanksčią talpyklą su ypatybe „elementų pradžia“. Mes naudosime ' md ' pertraukos taškas su ' daiktų centras “naudingumas ir “ lg ' pertraukos taškas su ' daiktų pabaiga 'naudingumas '