Tailwind CSS oferuje różne „ wyrównaj elementy ” narzędzia do kontrolowania położenia elementów elastycznych i siatkowych wzdłuż osi poprzecznej pojemnika. Te klasy narzędzi obejmują „początek przedmiotów”, „środek przedmiotów”, „koniec-przedmiotów”, „linia bazowa przedmiotów” i „rozciągnięcie elementów”. Co więcej, użytkownicy mogą również korzystać z punktów przerwania i zapytań o media w narzędziu „items-
W tym artykule zademonstrujemy metodę stosowania punktów przerwania i zapytań o media w narzędziach „align-items” w Tailwind.
Jak zastosować punkty przerwania i zapytania o media za pomocą „align-items” w Tailwind?
Aby zastosować żądane punkty przerwania i zapytania o media w narzędziach „justify-content” w Tailwind, utwórz strukturę HTML. Następnie zdefiniuj określoną wartość dla „ pozycje-
Przykład
W tym przykładzie utworzymy elastyczny kontener z właściwością „items-start”. skorzystamy z „ md ” punkt przerwania z „ Centrum przedmiotów ” użyteczność i „ lg ” punkt przerwania z „ przedmioty-koniec ” użyteczność w „
< ciało >
< dz klasa = „flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4” >
< dz klasa = 'bg-pink-600 py-4 w-40' > 1 dz >
< dz klasa = 'bg-pink-600 py-12 w-40' > 2 dz >
< dz klasa = 'bg-pink-600 py-8 w-40' > 3 dz >
dz >
ciało >
Tutaj:
-
- “ pozycje startowe ” wyrównuje elementy flex do początku kontenera w pionie.
- “ md: centrum przedmiotów ” wyrównuje pionowo elementy elastyczne do środka kontenera na średnim ekranie.
- “ lg: koniec elementów ” wyrównuje pionowo elementy flex do końca kontenera na dużym ekranie.
Wyjście
Powyższe dane wyjściowe pokazują, że pionowe wyrównanie elementów elastycznych zmienia się wraz ze zmianą rozmiaru ekranu. Oznacza to, że określone punkty przerwania i zapytania o media zostały skutecznie zastosowane za pomocą narzędzia „align-items”.
Wniosek
Aby zastosować punkty przerwania i zapytania o media za pomocą narzędzi „align-items” w Tailwind, zdefiniuj żądaną wartość jako „ pozycje-