Flexbox tai flex container on asettelu, jonka avulla käyttäjät voivat kohdistaa ja jakaa elementtejä säilön sisällä. Tailwind CSS tarjoaa erilaisia hyödyllisyysluokkia flexboxin luomiseen ja käyttämiseen. Laatikkotason joustava säiliö on joustava säiliö, joka käyttäytyy/toimii lohkotason elementin tavoin ja luo lohkon. Se vie emoelementin koko leveyden ja tekee uuden rivin itsensä jälkeen.
Tämä kirjoitus on esimerkki menetelmästä luoda lohkotason flex-säiliö Tailwindissä.
Kuinka luoda / tehdä lohkotason Flex-säiliö Tailwindissä?
Jos haluat luoda tietyn lohkotason joustavan säilön Tailwindissä, luo HTML-rakenne. Lisää sitten ' flex ” apuluokka halutulla
Syntaksi
< div luokkaa = 'flex...' >
...
div >
Koodi
< kehon >
< div luokkaa = 'flex Gap-2 m-2 border-2 border-black' >
< div luokkaa = 'bg-yellow-500 p-4' > Ensimmäinen kohde div >
< div luokkaa = 'bg-yellow-500 p-4' > Toinen kohde div >
< div luokkaa = 'bg-yellow-500 p-4' > Kolmas kohde div >
div >
kehon >
Tässä ylätason
-
- ' flex ” -luokkaa käytetään lohkotason flex-säiliön luomiseen.
- ' väli-2 ” luokka lisää 2 yksikköä välin flexin lapsielementtien väliin.
- ' m-2 ” luokka lisää 2 yksikköä marginaalia kontin kaikille sivuille.
- ' raja-2 ” luokka lisää reunan säilöön 2 yksikön leveydellä.
- ' reuna-musta ” luokka asettaa reunuksen värin mustaksi.
Lapsen flex-elementeissä:
-
- ' bg-keltainen-500 ” luokka käyttää keltaista väriä flex-tuotteen taustaan.
- ' p-4 ” luokka lisää 4 yksikön pehmusteen flex-osien kaikille puolille.
Lähtö
Yllä olevassa lähdössä reunus edustaa sitä, että säiliö on lohkotason joustava kontti, joka peittää yläelementtinsä (selaimen) koko leveyden.
Vaihtoehtoisesti käyttäjä voi varmistaa tämän tarkastamalla joustavan konttielementin verkkosivulla:
Yllä oleva tulos osoittaa, että säiliö on lohkotason joustava säiliö.
Johtopäätös:
Lohkotason joustavan säilön luomiseksi Tailwindissä on lisättävä ' flex ” apuluokka tietyn säilön kanssa ja määritä sen alielementit. Käyttäjät voivat määritellä ja muokata joustavia kohteita tarpeidensa mukaan. Vahvista lisäämällä reunus säilöön ja tarkastelemalla verkkosivua tai tarkastelemalla kyseistä elementtiä verkkosivulla. Tässä artikkelissa on selitetty menetelmä lohkotason joustavan säilön luomiseksi Tailwindissä.