W tym artykule wyjaśniono metodę zapobiegania zawijaniu elementów elastycznych w CSS Tailwind.
Jak zapobiegać/powstrzymywać zawijanie się przedmiotów Flex w Tailwind?
Aby zapobiec zawijaniu elementów elastycznych w Tailwind, utwórz plik HTML. Następnie użyj narzędzia „flex-nowrap” z kontenerem flex w programie HTML, aby zapobiec zawijaniu elementów flex. Następnie sprawdź zmiany, wyświetlając stronę internetową HTML.
Wypróbuj poniższe kroki, aby lepiej to zrozumieć:
Krok 1: Zapobiegaj zawijaniu elementów Flex w programie HTML
Stwórz program HTML i użyj „ flex-nowrap ” z żądanym elastycznym pojemnikiem, aby zapobiec zawijaniu się elastycznych przedmiotów:
< ciało >
< dz klasa = 'flex flex-nowrap h-40' >
< dz klasa = 'podstawa-1/4 bg-czerwony-500 m-1' > 1 < / dz >
< dz klasa = 'podstawa-1/3 bg-żółty-500 m-1' > 2 < / dz >
< dz klasa = 'podstawa-1/2 bg-turkusowy-500 m-1' > 3 < / dz >
< / dz >
< / ciało >
Tutaj:
- “ przewód ” umożliwia układ Flexbox na elementu i umożliwia rozmieszczenie i wyrównanie elementów podrzędnych.
- “ flex-nowrap ” określa, że elementy elastyczne nie powinny zawijać się w wiele wierszy i przechowywać wszystkie elementy elastyczne w jednym wierszu.
- „ podstawa-1/4 ”, „ podstawa-1/3 ', I ' podstawa-1/2 ” zajęcia ustawiają wewnętrzne
odpowiednio do 25%, 33,33% i 50% ich elementów nadrzędnych.
Krok 2: Sprawdź dane wyjściowe
Aby upewnić się, że elementy elastyczne nie zostały opakowane, wyświetl stronę HTML:
Na powyższej stronie elementy elastyczne znajdują się w jednym wierszu i nie zostały opakowane.
Wniosek
Aby zapobiec zawijaniu elementów elastycznych w Tailwind, użyj narzędzia „flex-nowrap” z żądanym kontenerem elastycznym w programie HTML. To narzędzie zapobiega zawijaniu elementów elastycznych. W celu weryfikacji przejrzyj zmiany na stronie internetowej. W tym artykule zilustrowano metodę zapobiegania zawijaniu elementów elastycznych w CSS Tailwind.