Tässä artikkelissa selitetään menetelmä, jolla flex-basis asetetaan Tailwind CSS:ssä.
Kuinka asettaa Flex Basis Tailwindissä?
Jos haluat määrittää Tailwind CSS:n joustavan perustan, luo HTML-tiedosto. Käytä sitten ' perus-
Katso annettuja vaiheita käytännön esittelyä varten:
Vaihe 1: Aseta Flex Basis HTML-ohjelmassa
Tee HTML-ohjelma ja käytä ' perus-
< kehon >
< div luokkaa = 'flex h-20' >
< div luokkaa = 'basis-1/4 bg-red-400 m-1' > 1 < / div >
< div luokkaa = 'basis-1/3 bg-teal-400 m-1' > 2 < / div >
< div luokkaa = 'basis-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / kehon >
Tässä:
- ' flex ” -luokkaa käytetään joustavan asettelun luomiseen ja alielementin kokojen säätämiseen käytettävissä olevan tilan mukaan.
- ' h-20 ” luokka asettaa :n korkeudeksi 20 yksikköä.
- ' perus-1/4 ” luokka asettaa sisemmän
-elementin leveydeksi 25 % sen yläelementistä.- ' perus-1/3 ” luokka asettaa sisemmän
:n leveydeksi 33,33 % sen ylätason säilöstä.- ' perus-1/2 ” luokka asettaa
:n leveydeksi 50 % sen ylätason säilöstä.- ' bg-red-400 ” luokka käyttää punaista taustaväriä
:lle.- ' bg-teal-400 ”-luokka asettaa sinivihreän värin
:n taustalle.- ' bg-orange-400 ” luokka käyttää oranssia taustaväriä
:lle.- ' m-1 ” luokka lisää 1 yksikön marginaalin jokaisen
-elementin ympärille.Vaihe 2: Tarkista lähtö
Varmista, että flex-basis on asetettu ja toimii oikein, katsomalla HTML-verkkosivua:
Yllä olevassa tuotoksessa näkyy flex-pohja, jonka mukaan ne on muotoiltu.
Johtopäätös
Flex-pohjan avulla käyttäjät voivat luoda joustavia asetteluja, jotka mukautuvat erilaisiin näyttökokoihin ja resoluutioihin. Jos haluat asettaa joustavan perustan Tailwind CSS:ssä, ' perus-
” HTML-ohjelmassa käytetään apuluokkaa. Käyttäjien on määritettävä joustava tuotteen koko ja varmistettava muutokset verkkosivulla. Tässä artikkelissa on selitetty menetelmä joustavan perustan asettamiseen Tailwind CSS:ssä. - ' perus-1/4 ” luokka asettaa sisemmän