Ten artykuł wyjaśni metodę ustawiania flex-basis w Tailwind CSS.
Jak ustawić Flex Basis w Tailwind?
Aby ustawić podstawę flex w Tailwind CSS, utwórz plik HTML. Następnie użyj „ podstawa-
Spójrz na podane kroki, aby zobaczyć praktyczną demonstrację:
Krok 1: Ustaw Flex Basis w programie HTML
Stwórz program HTML i wykorzystaj „ podstawa-
< ciało >
< dz klasa = 'flex h-20' >
< dz klasa = 'podstawa-1/4 bg-czerwony-400 m-1' > 1 < / dz >
< dz klasa = 'podstawa-1/3 bg-turkusowy-400 m-1' > 2 < / dz >
< dz klasa = 'podstawa-1/2 bg-orange-400 m-1' > 3 < / dz >
< / dz >
< / ciało >
Tutaj:
- “ przewód ” służy do tworzenia elastycznego układu i dostosowywania rozmiarów elementu podrzędnego w oparciu o dostępną przestrzeń.
- “ h-20 ” class ustawia wysokość elementu na 20 jednostek.
- “ podstawa-1/4 ” ustawia szerokość wewnętrznego elementu
na 25% jego elementu nadrzędnego.- “ podstawa-1/3 ” ustawia szerokość wewnętrznego elementu
na 33,33% jego kontenera nadrzędnego.- “ podstawa-1/2 ” ustawia szerokość elementu
na 50% jego kontenera nadrzędnego.- “ bg-czerwony-400 ” stosuje czerwony kolor tła do elementu
.- “ bg-turkusowy-400 ” class ustawia turkusowy kolor tła elementu
.- “ bg-pomarańczowy-400 ” zastosuje pomarańczowy kolor tła do elementu
.- “ m-1 ” dodaje margines 1 jednostki wokół każdego elementu
.Krok 2: Sprawdź dane wyjściowe
Aby upewnić się, że podstawa flex została ustawiona i działa poprawnie, obejrzyj stronę HTML:
Na powyższym wyjściu widać podstawę flex, według której zostały stylizowane.
Wniosek
Podstawa Flex umożliwia użytkownikom tworzenie elastycznych układów, które dopasowują się do różnych rozmiarów i rozdzielczości ekranu. Aby ustawić flex-basis w Tailwind CSS, „ podstawa-
” klasa narzędziowa jest używana w programie HTML. Użytkownicy muszą określić elastyczny rozmiar elementu i zapewnić zmiany, przeglądając stronę internetową. W tym artykule wyjaśniono metodę ustawiania elastycznej podstawy w CSS Tailwind. - “ podstawa-1/4 ” ustawia szerokość wewnętrznego elementu