Thư viện thuật ngữ / UI/UX

Flow layout là gì?

Còn gọi: bố cục theo dòng chảy

Flow layout là cách sắp xếp trong đó các phần tử nối tiếp nhau theo thứ tự và tự xuống hàng khi hết chỗ, giống chữ trong một đoạn văn, thay vì được đặt ở vị trí cố định.

Hiểu kỹ hơn

Trên web, đây là cách trình duyệt hiển thị mặc định (normal flow): khối xếp từ trên xuống, phần tử nội dòng xếp từ trái sang phải và xuống dòng khi tràn. Flexbox với flex-wrap hoặc CSS grid với auto-fill cũng tạo ra hành vi tương tự cho danh sách thẻ. Trên iOS, khái niệm này có trong UICollectionViewFlowLayout dùng cho lưới ảnh. Trong Figma, tương đương là auto layout ngang với chế độ Wrap: các chip, thẻ tag hay ảnh sẽ tự xuống hàng khi khung hẹp lại. Ưu điểm là nội dung tự thích ứng với số lượng và kích thước màn hình mà không cần định vị từng phần tử. Ví dụ: danh sách thẻ chủ đề trên trang blog như UI, UX, Figma, Typography tự xuống dòng khi màn hình hẹp. Lỗi thường gặp là căn giữa các phần tử trong bố cục xuống hàng, khiến hàng cuối lẻ loi lệch khỏi lưới, hoặc kích thước các phần tử chênh nhau quá nhiều làm các hàng lởm chởm.