A Flexbox vagy a flex konténer egy olyan elrendezés, amely lehetővé teszi a felhasználók számára, hogy egy tárolón belül igazítsák és osztják el az elemeket. A Tailwind CSS különféle segédprogramosztályokat kínál a flexbox létrehozásához és használatához. A dobozszintű rugalmas tároló egy olyan rugalmas tároló, amely blokkszintű elemként viselkedik/működik, és blokkot hoz létre. Felveszi a szülőelem teljes szélességét, és új sort ír maga után.
Ez az írás egy blokkszintű rugalmas konténer létrehozásának módszerét példázza a Tailwindben.
Hogyan készítsünk blokkszintű rugalmas tárolót a Tailwindben?
Egy adott blokkszintű rugalmas tároló létrehozásához a Tailwindben hozzon létre egy HTML-struktúrát. Ezután adja hozzá a „ Flex ” segédprogram osztályt a kívánt
Szintaxis
< div osztály = 'Flex ...' >
...
div >
Kód
< test >
< div osztály = 'flex gap-2 m-2 border-2 border-black' >
< div osztály = 'bg-yellow-500 p-4' > Első tétel div >
< div osztály = 'bg-yellow-500 p-4' > Második tétel div >
< div osztály = 'bg-yellow-500 p-4' > Harmadik tétel div >
div >
test >
Itt, a szülő
-
- ' Flex ” osztály blokk szintű flex konténer létrehozására szolgál.
- ' rés-2 ” osztály 2 egységnyi távolságot ad a flex gyermekelemei közé.
- ' m-2 ” osztály 2 egység margót ad a konténer minden oldalához.
- ' határ-2 ” osztály hozzáadja a szegélyt a tárolóhoz 2 egység szélességgel.
- ' határ-fekete ” osztály a keret színét feketére állítja.
A gyermek flex elemekben:
-
- ' bg-sárga-500 ” osztály sárga színt alkalmaz a rugalmas elem hátterére.
- ' p-4 ” osztály 4 egységből álló párnázással egészíti ki a flex elemek minden oldalát.
Kimenet
A fenti kimenetben a szegély azt jelenti, hogy a tároló blokkszintű flex konténer, amely a szülőeleme (böngésző) teljes szélességét elfoglalja.
Alternatív megoldásként a felhasználó ezt úgy biztosíthatja, hogy megvizsgálja a flex konténer elemet a weboldalon:
A fenti kimenet azt jelzi, hogy a tároló blokkszintű rugalmas tároló.
Következtetés:
Blokkszintű rugalmas tároló létrehozásához a Tailwindben, hozzá kell adni a „ Flex ” segédprogram osztályt az adott tárolóval, és adja meg annak gyermekelemeit. A felhasználók igényeik szerint határozhatnak meg és módosíthatnak rugalmas elemeket. Az ellenőrzéshez adja hozzá a szegélyt a tárolóhoz, és tekintse meg a weboldalt, vagy ellenőrizze az elemet a weboldalon. Ez a cikk ismerteti a blokkszintű rugalmas tároló létrehozásának módszerét a Tailwindben.