Flexbox lub elastyczny kontener to układ, który umożliwia użytkownikom wyrównywanie i dystrybucję elementów w kontenerze. Tailwind CSS oferuje różne klasy narzędzi do tworzenia i pracy z Flexboksem. Elastyczny kontener na poziomie pudełka to elastyczny kontener, który zachowuje się/działa jak element na poziomie bloku i tworzy blok. Zajmuje całą szerokość elementu nadrzędnego i tworzy po sobie nową linię.
Ten opis będzie przykładem metody tworzenia elastycznego kontenera na poziomie bloku w Tailwind.
Jak utworzyć/zrobić elastyczny kontener na poziomie bloku w Tailwind?
Aby utworzyć konkretny elastyczny kontener na poziomie bloku w Tailwind, utwórz strukturę HTML. Następnie dodaj „ przewód ” klasa użyteczności z żądanym
Składnia
< dz klasa = 'przewód ...' >
...
dz >
Kod
< ciało >
< dz klasa = 'flex gap-2 m-2 border-2 border-black' >
< dz klasa = 'bg-żółty-500 p-4' > Pierwszy przedmiot dz >
< dz klasa = 'bg-żółty-500 p-4' > Drugi przedmiot dz >
< dz klasa = 'bg-żółty-500 p-4' > Trzeci element dz >
dz >
ciało >
Tutaj, w nadrzędnym kontenerze
-
- “ przewód ” służy do tworzenia elastycznego kontenera na poziomie bloku.
- “ przerwa-2 ” dodaje 2 jednostki odstępu między elementami potomnymi Flexa.
- “ m-2 ” dodaje 2 jednostki marginesu do wszystkich boków kontenera.
- “ granica-2 ” dodaje do kontenera obramowanie o szerokości 2 jednostek.
- “ czarne obramowanie ” klasa ustawia kolor obramowania na czarny.
W elastycznych elementach dziecka:
-
- “ bg-żółty-500 ” nakłada żółty kolor na tło elementu elastycznego.
- “ p-4 ” dodaje dopełnienie 4 jednostek ze wszystkich stron elastycznych elementów.
Wyjście
W powyższym wyniku obramowanie oznacza, że kontener jest elastycznym kontenerem na poziomie bloku, który zajmuje całą szerokość elementu nadrzędnego (przeglądarki).
Alternatywnie, użytkownik może to sprawdzić, sprawdzając element elastycznego kontenera na stronie internetowej:
Powyższe dane wyjściowe wskazują, że kontener jest elastycznym kontenerem na poziomie bloku.
Wniosek:
Aby utworzyć elastyczny kontener na poziomie bloku w Tailwind, wymagane jest dodanie „ przewód ” użytkowej z danym kontenerem i określić jego elementy potomne. Użytkownicy mogą definiować i modyfikować elementy elastyczne zgodnie ze swoimi potrzebami. W celu weryfikacji dodaj obramowanie do kontenera i wyświetl stronę internetową lub sprawdź ten element na stronie internetowej. W tym artykule wyjaśniono metodę tworzenia elastycznego kontenera na poziomie bloku w Tailwind.