Flexbox või flex konteiner on paigutus, mis võimaldab kasutajatel joondada ja jaotada elemente konteineris. Tailwind CSS pakub flexboxi loomiseks ja sellega töötamiseks erinevaid utiliidiklasse. Kasti tasemel painduv konteiner on painduv konteiner, mis käitub/toimib nagu plokitaseme element ja loob ploki. See võtab enda alla kogu oma emaelemendi laiuse ja loob enda järel uue rea.
See kirjutis näitab Tailwindis plokitasemel paindliku konteineri loomise meetodit.
Kuidas luua/teha Tailwindis plokitasemel Flex-konteiner?
Konkreetse plokitasemel paindliku konteineri loomiseks Tailwindis looge HTML-struktuur. Seejärel lisage ' painduv ” utiliidiklass soovitud
Süntaks
< div klass = 'flex...' >
...
div >
Kood
< keha >
< div klass = 'paindlik vahe-2 m-2 ääris-2 ääris-must' >
< div klass = 'bg-yellow-500 p-4' > Esimene ese div >
< div klass = 'bg-yellow-500 p-4' > Teine element div >
< div klass = 'bg-yellow-500 p-4' > Kolmas element div >
div >
keha >
Siin, emakonteineris
-
- “ painduv ” klassi kasutatakse plokitasemel paindliku konteineri loomiseks.
- “ vahe-2 ” klass lisab flexi alamelementide vahele 2 ühikut vahet.
- “ m-2 ” klass lisab konteineri kõikidele külgedele 2 ühikut varu.
- “ piir-2 ” klass lisab äärise konteinerile 2 ühiku laiusega.
- “ ääris-must ” klass määrab äärise värvi mustaks.
Lapse paindeelementides:
-
- “ bg-kollane-500 ” klass rakendab painduva elemendi taustale kollast värvi.
- “ p-4 ” klass lisab painduvate esemete kõikidele külgedele 4-ühikulise polsterduse.
Väljund
Ülaltoodud väljundis tähistab ääris, et konteiner on plokitasemel painduv konteiner, mis võtab enda alla kogu oma emaelemendi (brauseri) laiuse.
Teise võimalusena saab kasutaja seda tagada, kontrollides veebilehel painduva konteineri elementi:
Ülaltoodud väljund näitab, et konteiner on plokitasemel painduv konteiner.
Järeldus:
Tailwindis plokitasemel paindliku konteineri loomiseks tuleb lisada ' painduv ” utiliidiklass konkreetse konteineriga ja määrake selle alamelemendid. Kasutajad saavad paindlikke elemente vastavalt oma vajadustele määratleda ja muuta. Kinnitamiseks lisage konteinerile ääris ja vaadake veebilehte või kontrollige seda elementi veebilehel. Selles artiklis on selgitatud Tailwindis plokitasemel paindliku konteineri loomise meetodit.