CSS Tailwind cung cấp “ 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. Nó có nhiều lớp tiện ích khác nhau, chẳng hạn như “items-start”, “items-center”, “items-end”, “items-baseline”, v.v. Ngoài ra, người dùng cũng có thể sử dụng thuộc tính hover với “items-
Bài viết này sẽ minh họa phương pháp áp dụng tiện ích hover on align-items trong Tailwind CSS.
Cách áp dụng Di chuột trên Tiện ích “align-items” trong Tailwind?
Để áp dụng di chuột trên tiện ích “align-items” trong Tailwind, hãy tạo cấu trúc HTML và thêm “ bay lượn ” lớp tiện ích với mong muốn “ mặt hàng-
cú pháp
< yếu tố lớp học = 'di chuột: mục-
Thay thế
Ví dụ
Trong ví dụ này, chúng tôi sẽ tạo một thùng chứa linh hoạt với thuộc tính “items-start”. Sau đó, chúng tôi sẽ sử dụng “ di chuột: trung tâm vật phẩm ” lớp học trong “ đầu ra Để áp dụng hiệu ứng di chuột trên tiện ích “align-items” trong Tailwind, hãy sử dụng “ bay lượn ” lớp tiện ích với đặc biệt“ mặt hàng-
< thân hình >
< div lớp học = 'flex items-start hover:items-center justify-quanh text-center h-44 m-3 bg-pink-300 gap-4' >
< div lớp học = 'bg-pink-600 py-4 w-40' > 1 div >
< div lớp học = 'bg-hồng-600 py-12 w-40' > 2 div >
< div lớp học = 'bg-hồng-600 py-8 w-40' > 3 div >
div >
thân hình >
Đây:
Từ trang web trên, có thể nhận thấy rằng việc căn chỉnh các mục linh hoạt đang thay đổi dọc theo trục chéo của vùng chứa khi di chuột. Phần kết luận