Jak zastosować punkty przerwania i zapytania o media za pomocą „justify-content” w Tailwind?

W tym artykule zilustrujemy metodę stosowania punktów przerwania i zapytań o media w narzędziach „justify-content” w Tailwind.

Jak zastosować punkty przerwania i zapytania o media za pomocą „justify-content” w Tailwind?

Aby zastosować określone punkty przerwania i zapytania o media w narzędziach „justify-content” w Tailwind, utwórz strukturę HTML. Następnie zdefiniuj żądaną wartość do „wyjustuj-” narzędzie dla różnych rozmiarów ekranu za pomocą „ md ' Lub ' lg ” punkty przerwania. Następnie zmień rozmiar ekranu strony internetowej w celu weryfikacji.

Przykład
W poniższym przykładzie mamy elastyczny kontener z właściwością „justify-start”. skorzystamy z „ md ” punkt przerwania z „usprawiedliwić pomiędzy” użyteczność i „ lg ” punkt przerwania z „wyjustuj koniec” użyteczność w „” element do zmiany poziomego wyrównania jego elementów na średnim i dużym ekranie:

Tutaj:

• „uzasadnij start” class wyrównuje elementy elastyczne na początku głównej osi kontenera.
• „md: justify-między” class rozkłada elementy elastyczne wzdłuż głównej osi kontenera z równymi odstępami między nimi na średnim ekranie.
• „lg: justify-end” class wyrównuje elastyczne elementy na końcu głównej osi kontenera na dużym ekranie.

Wyjście

Powyższe dane wyjściowe pokazują, że poziome 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 „justify-content”.

Wniosek

Aby zastosować punkty przerwania i zapytania o media za pomocą narzędzi „justify-content” w Tailwind, zdefiniuj żądaną wartość w „wyjustuj-” narzędzie dla różnych rozmiarów ekranu, wykorzystując „ md ' Lub ' lg ” punkty przerwania. W celu weryfikacji zmień rozmiar ekranu strony internetowej i zapewnij zmiany. W tym artykule zademonstrowano przykład zastosowania żądanych punktów przerwania i zapytań o media w narzędziach „justify-content” w Tailwind.