A Complete Guide to Flexbox

Background

Flexbox layout (Flexible Box) hướng đến việc cung cấp một cách layout hiệu quả hơn, sắp xếp và phân chia không gian giữa các thành phần trong một container, ngay cả khi kích thước của chúng là động hoặc không xác định (đúng như cái tên “flex”)

Ý tưởng chính bên dưới flex layout là cung cấp cho container khả năng điều chỉnh các thành phần bên trong nó (width/height và thứ tự) để sắp xếp một cách tốt nhất các khoảng không gian trống (chủ yếu là để điều chỉnh cho hợp lý tất cả các kiểu hiển thị của các thiết bị và kích thước màn hình). Một flex container có thể mở rộng để lấp đầy các khoảng trống hoặc co lại để tránh việc đè (overflow).

Điểm quan trọng nhất, flex layout là vô hướng, hoàn toàn ngược lại với kiểu layout thông thường (bock sử dụng cho vertically-based, inline dùng cho horizontally-based). Trong khi các làm đó hoạt động tốt cho nhiều trang, nhưng chúng thiếu đi tính linh động để hỗ trợ cho các ứng dụng lớn và phức tạp (đặc biệt khi thay đổi hướng, kích thước, co giãn màn hình …)

Note: Flexbox layout thích hợp cho việc bố trí các thành phần của một ứng dụng và các thành phần quy mô nhỏ, trong khi Grid thích hợp cho việc bố trí các thành phần quy mô lớn

Nguồn: https://css-tricks.com/snippets/css/a-guide-to-flexbox/