Kuinka lisätä vaaka- ja pystysuoraa tilaa elementtien väliin myötätuulessa?

Kuinka Lisata Vaaka Ja Pystysuoraa Tilaa Elementtien Valiin Myotatuulessa



Tailwind CSS tarjoaa ' väliin ” apuohjelmia flex- tai grid-säiliön elementtien välisen tilan ohjaamiseen. Siinä on useita luokkia, kuten 'välilyönti-x- ', 'välilyönti-y- ', 'välilyönti-x-käänteinen', 'välilyönti-y-käänteinen' jne. Nämä apuohjelmat lisäävät vaaka- ja pystysuora tila säiliön jousto- tai ristikkoelementtien välillä.

Vaakasuora tila on x-akselilla oleva tila flex- tai ruudukkosäiliön lapsielementtien välillä, kun ne on järjestetty riviin. Pystysuora tila on tila y-akselia pitkin jousto- tai ristikkosäiliön lapsielementtien välillä, kun ne on järjestetty sarakkeeseen.

Tämä artikkeli osoittaa:





Kuinka lisätä vaakatilaa elementtien väliin myötätuulessa?

Jos haluat lisätä vaakatilaa elementtien väliin Tailwindissä, ' space-x- ” luokkaa käytetään halutun elementin kanssa HTML-ohjelmassa. Tämä luokka lisää tilaa elementtien väliin x-akselilla.



Syntaksi



luokkaa = 'välilyönti-x- ...'>... < / elementti>

Tässä 'x' edustaa 'x-akselia' tai 'vaakatilaa'. Muista korvata ' ' millä tahansa kelvollisella arvolla, kuten '4', '10' jne.



Esimerkki: Vaakasuuntaisen tilan käyttäminen elementtien välillä myötätuulessa

Tässä esimerkissä meillä on joustava kontti, jossa on joitain alielementtejä. Käytämme ' välilyönti x-8 ' hyötyluokka '

”-elementti lisää vaakatilan alielementtien väliin:



< kehon >

< div luokkaa = 'flex space-x-8 m-10 k-20 w-max' >

< div luokkaa = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div luokkaa = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div luokkaa = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div luokkaa = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div luokkaa = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div luokkaa = 'bg-teal-500 w-20 p-5' > 6 < / div >

< / div >

< / kehon >

Tässä ylätason

-elementissä:

  • ' flex ”-luokka luo joustavan ulkoasun.
  • ' välilyönti x-8 ” luokka lisää 8 yksikköä vaakasuoraa etäisyyttä joustoelementtien väliin säiliön sisällä.
  • ' m-10 ” luokka lisää 10 yksikön marginaalia kontin jokaiselle sivulle.
  • ' h-20 ” luokka asettaa kontin korkeudeksi 20 yksikköä.
  • ' w-max ” luokka asettaa säilön leveyden sen enimmäissisältöleveyteen.

Alatason

-elementeissä:

  • ' bg-teal-500 ” luokka asettaa flex-elementtien taustan sinivihreäksi.
  • ' w-20 ” luokka asettaa jokaisen flex-tuotteen leveydeksi 20 yksikköä.
  • ' p-5 ” luokka lisää 5 yksikköä pehmustetta jokaiselle flex-tuotteelle.

Lähtö

Yllä oleva tulos osoittaa, että vaakasuora tila flex-elementin välillä on käytetty onnistuneesti.

Kuinka lisätä pystysuuntaista tilaa elementtien väliin myötätuulessa?

Jos haluat lisätä pystysuoraa tilaa Tailwindin elementtien väliin, ' välilyönti-y- ” luokkaa käytetään tietyn elementin kanssa HTML-ohjelmassa. Tämä luokka lisää tilaa elementtien väliin y-akselilla.

Syntaksi

luokkaa = 'välilyönti-y- ...' >...< / elementti>

Tässä 'y' edustaa 'y-akselia' tai 'pystyavaruutta'. Muista korvata ' ' millä tahansa todellisella arvolla, kuten '5', '12' jne.

Esimerkki: Pystysuoran tilan käyttäminen elementtien välillä myötätuulessa

Tässä esimerkissä meillä on joustava säiliö, jossa on joitain alielementtejä sarakkeessa. Käytämme ' space-y-5 ' hyötyluokka '

”-elementti lisää pystysuoraa tilaa alielementtien väliin:

< kehon >

< div luokkaa = 'flex flex-col space-y-5 m-10 text-center' >
< div luokkaa = 'bg-teal-500 p-5' > 1 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 2 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 3 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 4 < / div >
< / div >

< / kehon >

Tässä:

  • ' flex ”-luokka luo joustavan ulkoasun.
  • ' flex-col ” luokka kohdistaa flex-kohteet pystysuunnassa (sarakkeessa).
  • ' space-y-5 ” luokka lisää 5 yksikköä pystyetäisyyttä joustoelementtien väliin säiliön sisällä.
  • ' m-10 ” luokka lisää 10 yksikön marginaalia kontin jokaiselle sivulle.
  • ' tekstikeskus ” luokka tasaa säilön tekstin keskelle.

Lähtö

Joustoelementtien välinen pystytila ​​on käytetty tehokkaasti.

Johtopäätös

Jos haluat lisätä vaaka- ja pystytilan elementtien väliin Tailwindissä, ' space-x- ' ja ' välilyönti-y- ” hyödyllisyysluokkia käytetään haluttujen elementtien kanssa HTML-ohjelmassa vastaavasti. Näitä luokkia käytetään yleensä flex- ja grid-säiliöiden kanssa ohjaamaan tilaa niiden alielementtien välillä. Tämä artikkeli on esimerkki menetelmästä käyttää vaaka- ja pystysuoraa tilaa elementtien välillä Tailwindissä.

Muut

Luokka

Suosittu Viestiä

C++ ByteArray

Kuinka poistaa incognito-tila käytöstä Androidissa

Kuinka lajitella taulukon elementtejä MATLABissa käyttämällä sort()

Isblank()-funktion käyttäminen C++:ssa

Kuinka muuttaa Windowsin näytön skaalausta?

Mitä virhekoodi 279 tarkoittaa Robloxissa?

Kuinka asentaa ja määrittää Wine Ubuntu 22.04:ssä

Automorfisten numeroiden tarkistaminen Javassa

Paras tapa sisällyttää CSS? Miksi käyttää @import?

Raspup Puppy Linux -käyttöjärjestelmän asentaminen Raspberry Pi -sovellukseen

Ota Raspberry Pi puhumaan eSpeakin kautta

ESP32 ADC – Lue analogiset arvot Arduino IDE:llä

Kuinka asentaa uusin NextCloud AIO (All In One) Ubuntu/Debian/Fedora/RHEL/AlmaLinux/Rocky Linux/CentOS Streamiin

Strncpy()-funktion käyttäminen C++:ssa

Kuinka korjata Windows Update -virhe 0x8024402f Windows 10/8/7 -käyttöjärjestelmässä

5 virhettä kuulokkeiden mikrofonin korjaamiseksi

Monostabiilin multivibraattorin toiminnan ymmärtäminen

Mikä on SQLiteStudion käyttö?

Miten kirjain- ja kirjainkoolla ei ole merkitystä merkkijonojen vertailussa JavaScriptissä

Kuinka korjata 'Pakettia ei voi paikantaa' -virhe Kali Linuxissa