Kaip „Tailwind“ pritaikyti lūžio taškus ir medijos užklausas su „pateisinimo turiniu“?

Kaip Tailwind Pritaikyti Luzio Taskus Ir Medijos Uzklausas Su Pateisinimo Turiniu



Tailwind CSS, „pateisinti turinį“ Komunalinės paslaugos naudojamos lanksčio ir tinklelio konteinerio padėčiai išilgai pagrindinės ašies valdyti. Jame yra įvairių naudingumo klasių, tokių kaip „pateisinti-normalus“, „pateisinti-tarp“, „pateisinti-pradėti“, „pateisinti-centras“, „pagrįsti aplink“ ir tt Be to, vartotojai taip pat gali naudoti lūžio taškus ir laikmenas. užklausos programoje „justify-“, kad pakeistumėte lanksčios arba tinklelio sudėtinio rodinio padėtį išilgai pagrindinės ašies skirtingų dydžių ekranuose.

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

Kaip „Tailwind“ pritaikyti lūžio taškus ir žiniasklaidos užklausas naudojant „pateisinti turinį“?

Norėdami pritaikyti tam tikrus lūžio taškus ir medijos užklausas „Pagrindinio turinio“ paslaugų programoms „Tailwind“, sukurkite HTML struktūrą. Tada nustatykite norimą reikšmę „pagrįsti-“ įvairių dydžių ekranų programa, naudojant ' md “ arba „ lg “ lūžio taškai. Tada, norėdami patikrinti, pakeiskite tinklalapio ekrano dydį.





Pavyzdys
Žemiau pateiktame pavyzdyje turime lankstų konteinerį su ypatybe „justify-start“. Mes naudosime ' md “ lūžio taškas su „pateisinti-tarp“ naudingumas ir „ lg “ lūžio taškas su „pateisinti pabaigą“ naudingumas „

“ elementas, skirtas pakeisti elementų horizontalų lygiavimą vidutinio ir didelio ekrano dydžiui:



< kūnas >

< div klasė = 'flex justify-start md:justify-beveen lg:justify-end gap-3 m-3 bg-teal-700' >
< div klasė = 'bg-yellow-400 w-24 h-12' > 1 < / div >
< div klasė = 'bg-yellow-400 w-24 h-12' > 2 < / div >
< div klasė = 'bg-yellow-400 w-24 h-12' > 3 < / div >

< / div >

< / kūnas >

Čia:



  • „Pateisinti-pradėti“ klasė sulygiuoja lanksčius elementus konteinerio pagrindinės ašies pradžioje.
  • 'md: pateisinti-tarp' klasė paskirsto lanksčius elementus išilgai pagrindinės konteinerio ašies vienodais atstumais tarp jų vidutinio dydžio ekrane.
  • „lg:justify-end“ klasė sulygiuoja lanksčius elementus konteinerio pagrindinės ašies gale dideliame ekrane.

Išvestis



Aukščiau pateikta išvestis rodo, kad kintant ekrano dydžiui keičiasi lanksčių elementų horizontalus lygiavimas. Tai rodo, kad nurodytos lūžio taškai ir medijos užklausos buvo veiksmingai pritaikytos naudojant „pateisinti turinį“ įrankį.

Išvada

Jei norite taikyti lūžio taškus ir medijos užklausas su „justify-content“ programomis „Tailwind“, nustatykite norimą reikšmę „pagrįsti-“ įvairių dydžių ekranų programa, naudojant „ md “ arba „ lg “ lūžio taškai. Norėdami patvirtinti, pakeiskite tinklalapio ekrano dydį ir užtikrinkite pakeitimus. Šiame straipsnyje parodytas pavyzdys, kaip taikyti norimus lūžio taškus ir medijos užklausas „Tailwind“ „pateisinti turinį“ paslaugų programoms.



Kita

Kategorija

Populiarios Temos

Kaip atkurti ištrintus tekstinius pranešimus „Android“ be programos

Kaip atsisiųsti ir įdiegti „Safari“ naršyklę „Windows“.

Kas yra event.target programoje „JavaScript“?

Kaip pritaikyti teksto dekoravimą naudojant tailwind Hover, Focus ir Active State

Kaip daryti ekrano kopijas „Google Chrome“.

Kaip įdiegti „Java“ kompiliatorių ir vykdymo laiką „Pop!_OS“.

Kaip naudoti suderintą LaTeX simbolį

Kaip pašalinti „Android“ GPS neveikiančią triktį

Kaip išspręsti Python klaidą „Nėra modulio, pavadinto Sklearn“.

Kaip konvertuoti dvejetainius skaičius į dešimtainius C

Kokia yra numatytoji klaidų žurnalo „Elasticsearch“ vieta?

Kaip apskaičiuoti nekeičiamą tenzoriaus gradientą „PyTorch“?

Kaip naudoti „addslashes“ () funkciją PHP

Geriausi nemokami garso redaktoriai, skirti „Windows“.

Kaip sąveikauti su failų aprašais Node.js?

SQL DENSE_RANK() funkcija

Kaip nustatyti HAProxy naudojant „Keepalived“, kad būtų užtikrintas didelis prieinamumas

Kaip sukurti ir naudoti sumavimo simbolį LaTeX

6 geriausi programavimo MicroPython IDE

Kaip gauti ESP32 WiFi stoties sąsajos MAC adresą naudojant Arduino IDE