Kuinka käyttää keskeytyspisteitä ja mediakyselyitä 'kohdistamalla kohteita' Tailwindissä?

Kuinka Kayttaa Keskeytyspisteita Ja Mediakyselyita Kohdistamalla Kohteita Tailwindissa



Tailwind CSS tarjoaa erilaisia ​​” kohdista-kohteet ” apuohjelmat, joilla ohjataan flex- ja grid-kohteiden sijaintia säiliön poikkiakselilla. Näitä hyödyllisyysluokkia ovat 'items-start', 'items-center', 'items-end', 'items-baseline' ja 'items-stretch'. Lisäksi käyttäjät voivat myös käyttää 'items-' -apuohjelman keskeytyskohtia ja mediakyselyitä muuttaakseen taipuvan tai ruudukon kohteen sijaintia säilön poikkiakselilla erikokoisilla näyttökokoilla.

Tässä artikkelissa esitellään tapa käyttää keskeytyskohtia ja mediakyselyjä Tailwindin 'align-items' -apuohjelmissa.





Kuinka käyttää keskeytyspisteitä ja mediakyselyitä 'kohdistamalla kohteita' Tailwindissä?

Jos haluat käyttää haluttuja keskeytyskohtia ja mediakyselyitä 'justify-content' -apuohjelmissa Tailwindissä, luo HTML-rakenne. Määritä sen jälkeen tietty arvo ' kohteet- '-apuohjelma eri näyttökokoille käyttämällä ' md ' tai ' lg ”katkospisteitä. Muuta lopuksi verkkosivun näytön kokoa vahvistusta varten.



Esimerkki



Tässä esimerkissä luomme joustavan säiliön, jonka ominaisuus on 'items-start'. Käytämme ' md 'katkoskohta ' esinekeskus 'apuohjelma ja' lg 'katkoskohta ' kohteiden loppu ' apuohjelma '

' -elementti muuttaa sen kohteiden pystysuuntaista kohdistusta keskikokoisella ja suurella näytöllä:



< kehon >

< div luokkaa = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div luokkaa = 'bg-pink-600 py-4 w-40' > 1 div >
< div luokkaa = 'bg-pink-600 py-12 w-40' > 2 div >
< div luokkaa = 'bg-pink-600 py-8 w-40' > 3 div >
div >

kehon >


Tässä:

    • ' kohteet-aloitus ” luokka kohdistaa joustavat kohteet säiliön alkuun pystysuunnassa.
    • ' md:items-center ” luokka kohdistaa joustavat kohteet pystysuoraan säiliön keskelle keskikokoisella näytöllä.
    • ' lg:items-end ” luokka kohdistaa joustavat kohteet pystysuoraan säiliön päähän suurella näytöllä.

Lähtö




Yllä oleva tulos osoittaa, että taipuvien kohteiden pystysuuntainen kohdistus muuttuu näytön koon muuttuessa. Tämä osoittaa, että määritetyt keskeytyskohdat ja mediakyselyt on käytetty tehokkaasti 'align-items' -apuohjelman kanssa.

Johtopäätös

Jos haluat käyttää keskeytyskohtia ja mediakyselyitä 'align-items' -apuohjelmilla Tailwindissä, määritä haluamasi arvo ' kohteet- '-apuohjelma eri näyttökokoille käyttämällä ' md ' tai ' lg ”katkospisteitä. Vahvistaaksesi muuta verkkosivun näytön kokoa ja varmista muutokset. Tässä artikkelissa on havainnollistettu esimerkkiä tiettyjen keskeytyskohtien ja mediakyselyjen soveltamisesta Tailwindin 'align-items' -apuohjelmiin.

muu

Luokka

Suosittu Viestiä

git-revert -komento Git | Selitetty

Arduino-ajastinkirjasto viivästymistä varten

Kuinka kuulla itsesi Discordissa

3 tapaa synkronoida Windows-kello Internet-aikapalvelimen kanssa

SciPy Imshow

Conky System Monitoring Toolin asentaminen Linux Mint 21:een

Hall-efektitunnistin ja kuinka magneetti toimii

Mikä on JavaScriptin HTML DOM Input Radio -tarkistettu ominaisuus

ZSH-profiilin vinkkejä ja temppuja

Hanki järjestelmätietoja Raspberry Pi -päätteestä screenFetchin kautta

Kuinka näyttää iPhonen näyttö PC:llä USB:n kautta

Kuinka rakentaa peruslaskin C++:lla

Kuinka löytää SSID iPhonesta - Helppo opas

Missä Discord-äänipalvelimet sijaitsevat fyysisesti ja kuinka vaihtaa äänialuetta?

Kuinka saada rebase master mihin tahansa haaraan esimerkin avulla

Watchdogin määrittäminen Raspberry Pi:ssä (automaattinen uudelleenkäynnistys reagoimaton Raspberry Pi)

3 helppoa tapaa sijoittaa kaksi Divia vierekkäin CSS:ssä

Skypen asentaminen Fedora Linuxiin

Kuinka tehdä upotetuista kartoista reagoivaksi

Kuinka löytää piirisarjan ohjain/laiteohjelmisto asennettavaksi saadaksesi WiFi/Ethernet-laitteet toimimaan Linuxissa