Làm thế nào để xây dựng một bố cục Responsive bằng Flexbox mà không cần sử dụng quá nhiều Media Queries?

Question

Accepted Answer

Bản chất cơ chế hoạt động
Flexbox (Flexible Box Layout Module) cung cấp khả năng phân phối không gian và căn chỉnh các phần tử bên trong container một cách tự động. Bằng cách kết hợp các thuộc tính như flex-wrap, flex-grow, flex-shrink và flex-basis (hoặc viết tắt là flex), trình duyệt sẽ tự động tính toán cách sắp xếp các item dựa trên không gian màn hình thực tế mà không cần ép buộc bằng các điểm ngắt (breakpoints) cố định.
Các lỗi phổ biến của lập trình viên Junior

Quên khai báo flex-wrap: wrap: Mặc định các flex items sẽ cố gắng nằm trên một dòng duy nhất, gây tràn nội dung (overflow) trên màn hình nhỏ.
Lạm dụng Media Queries thủ công: Viết quá nhiều breakpoint cho các component dạng thẻ (card grid) trong khi có thể giải quyết bằng các thuộc tính phân bổ tự động của Flexbox hoặc CSS Grid.

Ví dụ code chuẩn mực
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card-item {
  /* Flex-basis thiết lập kích thước cơ sở là 300px, flex-grow cho phép giãn ra, flex-shrink cho phép co lại */
  flex: 1 1 300px;
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 8px;
}
Kinh nghiệm thực chiến
Sử dụng thuộc tính gap thay cho margin khi làm việc với Flexbox giúp mã nguồn sạch hơn, loại bỏ hoàn toàn các lỗi tính toán khoảng cách thừa thãi ở các phần tử cuối hàng.

Làm thế nào để xây dựng một bố cục Responsive bằng Flexbox mà không cần sử dụng quá nhiều Media Queries?

Bản chất cơ chế hoạt động

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi css liên quan cùng chủ đề