Làm cách nào để áp dụng các điểm ngắt và truy vấn phương tiện với “align-items” trong Tailwind?

Tailwind CSS cung cấp nhiều “ sắp xếp các mục ” tiện ích để kiểm soát vị trí của các mục uốn và lưới dọc theo trục chéo của vùng chứa. Các lớp tiện ích này bao gồm “items-start”, “items-center”, “items-end”, “items-baseline” và “items-stretch”. Ngoài ra, người dùng cũng có thể sử dụng các điểm ngắt và truy vấn phương tiện trên tiện ích “items-” để thay đổi vị trí của mục linh hoạt hoặc lưới dọc theo trục chéo của vùng chứa trên các kích thước màn hình khác nhau.

Bài viết này sẽ trình bày phương pháp áp dụng điểm ngắt và truy vấn phương tiện trên tiện ích “align-items” trong Tailwind.

Làm cách nào để áp dụng các điểm ngắt và truy vấn phương tiện với “align-items” trong Tailwind?

Để áp dụng các điểm ngắt và truy vấn phương tiện mong muốn trên các tiện ích “biện minh nội dung” trong Tailwind, hãy tạo cấu trúc HTML. Sau đó, xác định giá trị cụ thể cho “ mặt hàng- ” tiện ích cho các kích thước màn hình khác nhau bằng cách sử dụng “ md ' hoặc ' lg ” điểm dừng. Cuối cùng, thay đổi kích thước màn hình của trang web để xác minh.

Ví dụ

Trong ví dụ này, chúng ta sẽ tạo một thùng chứa linh hoạt với thuộc tính “items-start”. Chúng tôi sẽ sử dụng “ md ” điểm ngắt với “ mục-trung tâm ” tiện ích và“ lg ” điểm ngắt với “ mục cuối ” tiện ích trong “