Flexbox alebo flex kontajner je rozloženie, ktoré umožňuje používateľom zarovnať a rozmiestniť prvky v kontajneri. Tailwind CSS ponúka rôzne triedy nástrojov na vytváranie a prácu s flexboxom. Flex kontajner na úrovni boxu je flexibilný kontajner, ktorý sa správa/pôsobí ako prvok na úrovni bloku a vytvára blok. Zaberie celú šírku svojho nadradeného prvku a vytvorí za sebou nový riadok.
Tento zápis bude príkladom metódy vytvárania flexibilného kontajnera na úrovni bloku v Tailwinde.
Ako vytvoriť/vytvoriť kontajner Flex na úrovni bloku v systéme Tailwind?
Ak chcete v Tailwinde vytvoriť konkrétny flexibilný kontajner na úrovni bloku, vytvorte štruktúru HTML. Potom pridajte „ flex ” pomocnú triedu s požadovaným
Syntax
< div trieda = 'flex...' >
...
div >
kód
< telo >
< div trieda = 'flex gap-2 m-2 border-2 border-black' >
< div trieda = 'bg-yellow-500 p-4' > Prvá položka div >
< div trieda = 'bg-yellow-500 p-4' > Druhá položka div >
< div trieda = 'bg-yellow-500 p-4' > Tretia položka div >
div >
telo >
Tu v nadradenom kontajneri
-
- “ flex ” sa používa na vytvorenie flexibilného kontajnera na úrovni bloku.
- “ medzera-2 “ trieda pridáva 2 jednotky medzery medzi podriadenými prvkami flex.
- “ m-2 “ trieda pridáva 2 jednotky okraja na všetky strany kontajnera.
- “ hranica-2 ” trieda pridá okraj do kontajnera so šírkou 2 jednotiek.
- “ hraničná-čierna ” nastaví farbu okraja na čiernu.
V detských ohybných prvkoch:
-
- “ bg-žltá-500 “ trieda aplikuje žltú farbu na pozadie ohybnej položky.
- “ p-4 “ trieda pridáva výplň 4 jednotiek na všetky strany ohybných predmetov.
Výkon
Vo vyššie uvedenom výstupe okraj predstavuje, že kontajner je flexibilný kontajner na úrovni bloku, ktorý zaberá celú šírku svojho nadradeného prvku (prehliadača).
Alternatívne to môže používateľ zabezpečiť kontrolou prvku flex kontajnera na webovej stránke:
Vyššie uvedený výstup naznačuje, že kontajner je flexibilný kontajner na úrovni bloku.
Záver:
Ak chcete vytvoriť flexibilný kontajner na úrovni bloku v Tailwinde, je potrebné pridať „ flex ” pomocnú triedu s konkrétnym kontajnerom a špecifikujte jeho podradené prvky. Používatelia môžu definovať a upravovať flexibilné položky podľa svojich potrieb. Na overenie pridajte okraj do kontajnera a zobrazte webovú stránku alebo skontrolujte tento prvok na webovej stránke. Tento článok vysvetľuje spôsob vytvárania flexibilného kontajnera na úrovni bloku v Tailwinde.