Giải pháp rất đơn giản – chỉ cần dùng CSS Flexbox và thuộc tính flex-direction: column-reverse.
1. CSS để đảo ngược danh sách
Thêm class .reverse-list vào thẻ <ul> hoặc <ol> bạn muốn đảo ngược:
.reverse-list {
display: flex;
flex-direction: column-reverse;
}Lưu ý: vì dùng display: flex, nên các style mặc định của <ul> hoặc <ol> (như bullet, số thứ tự) có thể bị ảnh hưởng. Bạn nên cân nhắc dùng thêm list-style-position: inside hoặc custom số thứ tự bằng CSS/JS nếu cần.
2. Thêm nút bấm để đảo ngược danh sách
Nếu muốn người dùng tự bấm nút để đảo ngược danh sách, bạn có thể sử dụng JavaScript/jQuery như sau:
$('#reverse').click(function() {
if ($(this).hasClass('curr-reverse')) {
$('#list-to-reverse').removeClass('reverse-list');
$(this).removeClass('curr-reverse');
} else {
$('#list-to-reverse').addClass('reverse-list');
$(this).addClass('curr-reverse');
}
});Chỉ cần thêm và gỡ class reverse-list là danh sách sẽ tự đảo lại theo ý muốn.
3. Ứng dụng thực tế
- Hiển thị bình luận mới nhất ở dưới cùng, giống hệ thống chat
- Log hoạt động theo thời gian gần nhất nằm dưới
- Danh sách thông báo, feed có hiệu ứng “kéo lên để xem cũ”
Kết luận
Đảo ngược danh sách bằng CSS là một kỹ thuật gọn nhẹ, không cần thao tác DOM hoặc thay đổi dữ liệu phía backend. Đây là ví dụ điển hình cho việc tận dụng sức mạnh của Flexbox để cải thiện UX mà vẫn giữ code đơn giản và hiệu quả.
Bình luận