Flexbox & Responsive: bố cục trang web thích ứng mọi màn hình

Flexbox: sắp xếp phần tử trong một chiều

Bật display: flex trên phần tử cha, các phần tử con tự xếp thành hàng (hoặc cột). Dùng justify-content căn ngang, align-items căn dọc, gap đặt khoảng cách.

// File: flex.css
.navbar {
  display: flex;
  justify-content: space-between; /* chia đều 2 đầu */
  align-items: center;
  padding: 16px 24px;
  background: #fff;
}

.card-grid {
  display: flex;
  flex-wrap: wrap; /* xuống hàng khi hết chỗ */
  gap: 20px;
}

.card-grid > .card {
  flex: 1 1 280px; /* tối thiểu 280px, co giãn đều */
}

CSS Grid: lưới 2 chiều

Grid mạnh hơn Flexbox khi cần bố cục 2 chiều (hàng VÀ cột cùng lúc). Dùng grid-template-columns định nghĩa số cột, fr là đơn vị chia phần.

// File: grid.css
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr; /* sidebar cố định + nội dung co giãn */
  gap: 24px;
  min-height: 100vh;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cột bằng nhau */
  gap: 20px;
}

Responsive: thích ứng mọi màn hình

Dùng @media query để áp CSS khác nhau tuỳ kích thước màn hình. Mobile-first nghĩa là viết CSS cho điện thoại trước, rồi @media (min-width: 768px) mở rộng cho tablet/desktop.

// File: responsive.css
/* Mobile first: mặc định 1 cột */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet: 2 cột */
@media (min-width: 768px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 cột */
@media (min-width: 1024px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

• Dùng được Flexbox để xếp hàng navbar, card grid
• Dùng được CSS Grid cho layout 2 chiều
• Viết được media query responsive mobile → tablet → desktop
• Hiểu viewport meta tag và mobile-first approach