Flexbox nebo flex kontejner je rozvržení, které umožňuje uživatelům zarovnávat a distribuovat prvky v kontejneru. Tailwind CSS nabízí různé třídy nástrojů pro vytváření a práci s flexboxem. Flex kontejner na úrovni krabice je flexibilní kontejner, který se chová/chová jako prvek na úrovni bloku a vytváří blok. Zabere celou šířku svého nadřazeného prvku a vytvoří za sebou nový řádek.
Tento zápis bude příkladem metody vytváření flexibilního kontejneru na úrovni bloku v Tailwindu.
Jak vytvořit/vytvořit kontejner Flex na úrovni bloku ve službě Tailwind?
Chcete-li v Tailwindu vytvořit konkrétní kontejner Flex na úrovni bloku, vytvořte strukturu HTML. Poté přidejte „ flex ” pomocná třída s požadovaným
Syntax
< div třída = 'flex...' >
...
div >
Kód
< tělo >
< div třída = 'flex gap-2 m-2 border-2 border-black' >
< div třída = 'bg-yellow-500 p-4' > První položka div >
< div třída = 'bg-yellow-500 p-4' > Druhá položka div >
< div třída = 'bg-yellow-500 p-4' > Třetí položka div >
div >
tělo >
Zde v nadřazeném kontejneru
-
- “ flex ” se používá k vytvoření flexibilního kontejneru na úrovni bloku.
- “ mezera-2 ” class přidá 2 jednotky mezery mezi podřízené prvky flex.
- “ m-2 “ třída přidá 2 jednotky okraje na všechny strany kontejneru.
- “ hranice-2 ” třída přidá ohraničení do kontejneru o šířce 2 jednotek.
- “ hraničně černá ” class nastaví barvu ohraničení na černou.
V dětských pružných prvcích:
-
- “ bg-žlutá-500 Třída ” aplikuje žlutou barvu na pozadí flexibilní položky.
- “ p-4 ” třída přidává vycpávku 4 jednotek na všechny strany ohebných předmětů.
Výstup
Ve výše uvedeném výstupu hranice představuje, že kontejner je flexibilní kontejner na úrovni bloku, který zabírá celou šířku svého nadřazeného prvku (prohlížeče).
Alternativně to může uživatel zajistit kontrolou prvku flex kontejneru na webové stránce:
Výše uvedený výstup označuje, že kontejner je flexibilní kontejner na úrovni bloku.
Závěr:
Chcete-li v Tailwindu vytvořit kontejner Flex na úrovni bloku, je nutné přidat „ flex ” třídu utility s konkrétním kontejnerem a určete jeho podřízené prvky. Uživatelé mohou definovat a upravovat flexibilní položky podle svých potřeb. Pro ověření přidejte ohraničení do kontejneru a zobrazte webovou stránku nebo prohlédněte tento prvek na webové stránce. Tento článek vysvětluje způsob vytváření flexibilního kontejneru na úrovni bloku v Tailwindu.