Responsive Design 2025: CSS Grid, Flexbox và Container Queries – Chọn Công Cụ Phù Hợp Cho Mọi Layout

Mở Đầu

1. CSS Flexbox: Layout Một Chiều

🔹 Flexbox Là Gì?

✅ Ưu Điểm Của Flexbox

🛑 Hạn Chế

💡 Ví Dụ Thực Tế: Thanh Navigation Bar Ngang

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2. CSS Grid: Layout Hai Chiều Chuyên Nghiệp

🔹 CSS Grid Là Gì?

✅ Ưu Điểm Của Grid

🛑 Hạn Chế

💡 Ví Dụ Thực Tế: Layout 3 Cột Responsive

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

3. Container Queries: Tương Lai Cho Các Thành Phần Modular

🔹 Container Queries Là Gì?

✅ Ưu Điểm Container Queries

🛑 Hạn Chế

💡 Ví Dụ Thực Tế: Card Thích Nghi Với Kích Thước Container

.card {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
}

4. Khi Nào Nên Dùng Công Cụ Nào?

Chiến Lược Kết Hợp 3 Công Cụ:

Kết Luận

Tham Khảo