Flexbox vai flex konteiners ir izkārtojums, kas ļauj lietotājiem līdzināt un sadalīt elementus konteinerā. Tailwind CSS piedāvā dažādas utilītu klases, lai izveidotu un strādātu ar flexbox. Kastes līmeņa elastīgais konteiners ir elastīgs konteiners, kas darbojas/darbojas kā bloka līmeņa elements un izveido bloku. Tas aizņem visu tā vecākelementa platumu un izveido jaunu līniju aiz sevis.
Šis raksts demonstrēs bloka līmeņa elastīgā konteinera izveides metodi programmā Tailwind.
Kā izveidot/izveidot bloka līmeņa elastīgu konteineru Tailwind?
Lai programmā Tailwind izveidotu noteiktu bloka līmeņa elastīgo konteineru, izveidojiet HTML struktūru. Pēc tam pievienojiet ' flex ” lietderības klasi ar vēlamo
Sintakse
< div klasē = 'flex...' >
...
div >
Kods
< ķermenis >
< div klasē = 'elastīgā sprauga-2 m-2 robeža-2 robeža-melna' >
< div klasē = 'bg-yellow-500 p-4' > Pirmā prece div >
< div klasē = 'bg-yellow-500 p-4' > Otrais vienums div >
< div klasē = 'bg-yellow-500 p-4' > Trešais postenis div >
div >
ķermenis >
Šeit, vecākkonteinerā
-
- ' flex ” klase tiek izmantota, lai izveidotu bloka līmeņa elastīgo konteineru.
- ' sprauga-2 ” klase pievieno 2 atstarpes vienības starp flex bērnelementiem.
- ' m-2 ” klase pievieno 2 rezervju vienības konteinera visām pusēm.
- ' robeža-2 ” klase pievieno apmali konteineram ar 2 vienību platumu.
- ' apmale-melna ” klase iestata apmales krāsu uz melnu.
Bērna flex elementos:
-
- ' bg-yellow-500 ” klasē elastīgā vienuma fonam tiek piemērota dzeltena krāsa.
- ' p-4 ” klase pievieno 4 vienību polsterējumu visām elastīgo priekšmetu pusēm.
Izvade
Iepriekš minētajā izvadē apmale norāda, ka konteiners ir bloka līmeņa elastīgs konteiners, kas aizņem visu tā vecākelementa (pārlūka) platumu.
Alternatīvi, lietotājs to var nodrošināt, pārbaudot elastīgā konteinera elementu tīmekļa lapā:
Iepriekš minētā izvade norāda, ka konteiners ir bloka līmeņa elastīgs konteiners.
Secinājums:
Lai izveidotu bloka līmeņa elastīgu konteineru programmā Tailwind, ir jāpievieno “ flex ” lietderības klase ar konkrēto konteineru un norādiet tās pakārtotos elementus. Lietotāji var definēt un modificēt elastīgās preces atbilstoši savām vajadzībām. Lai veiktu verifikāciju, pievienojiet konteineram apmali un skatiet tīmekļa lapu vai pārbaudiet šo tīmekļa lapas elementu. Šajā rakstā ir izskaidrota metode, kā izveidot bloka līmeņa elastīgo konteineru programmā Tailwind.