Bài 4. CSS nâng cao – Flexbox và Grid layout

Sau khi đã quen với CSS cơ bản, hôm nay chúng ta sẽ “nâng cấp trình độ” để bố cục web một cách chuyên nghiệp. Đây là một trong những phần cực kỳ quan trọng, vì bố cục xấu thì web dù màu mè cỡ nào cũng vẫn… dở 😅

Giả sử bạn muốn làm một trang web có header, menu bên trái, nội dung chính bên phải và footer ở dưới. Bạn thử dùng float, margin, position… nhưng càng chỉnh càng rối. Kết quả là giao diện như một bức tranh bị xé dở 😵

Đó là lý do hôm nay bạn cần học hai công cụ quyền lực nhất trong CSS layout hiện đại:

• Flexbox – linh hoạt, gọn gàng, dùng cho bố cục hàng ngang / dọc
• CSS Grid – mạnh mẽ, dùng cho bố cục dạng lưới, phức tạp

---

Mục tiêu bài học

• Hiểu được Flexbox là gì và cách hoạt động
• Tạo được các layout hàng ngang, dọc với Flexbox
• Hiểu Grid layout và ứng dụng sắp xếp theo dòng – cột
• Biết kết hợp cả hai công cụ để xây giao diện chuyên nghiệp
• Thực hành tạo bố cục dạng card, layout 2–3 cột phổ biến

---

1. Flexbox là gì?

Flexbox là viết tắt của “Flexible Box”, tức là hộp linh hoạt.
Thay vì phải canh margin/padding thủ công, giờ bạn có thể sắp xếp các phần tử dễ như chơi lego.

Kích hoạt flexbox:

Chỉ cần đặt display: flex vào phần tử cha:

📋 Copy.container {
  display: flex;
}

Ngay lập tức, các phần tử con sẽ xếp hàng ngang.

---

2. Các thuộc tính quan trọng trong flexbox

Trục chính (main axis) và trục phụ (cross axis)

• Mặc định, Flexbox sắp xếp theo hàng ngang (row), nên trục chính là từ trái → phải
• Trục phụ là từ trên → dưới

Bạn có thể đổi hướng bằng:

📋 Copyflex-direction: row;       /* mặc định */
flex-direction: column;    /* xếp từ trên xuống dưới */

---

Căn chỉnh theo trục chính – justify-content

📋 Copyjustify-content: flex-start;    /* mặc định: sát trái */
justify-content: center;        /* căn giữa */
justify-content: space-between;/* dàn đều, 2 đầu sát mép */
justify-content: space-around; /* khoảng cách đều xung quanh */

---

Căn theo trục phụ – align-items

📋 Copyalign-items: stretch;     /* mặc định: kéo dãn theo chiều cao */
align-items: center;      /* căn giữa theo chiều dọc */
align-items: flex-start;  /* bắt đầu từ trên */
align-items: flex-end;    /* sát dưới */

---

Cho phép con tự canh riêng – align-self

📋 Copy.item1 {
  align-self: flex-start;
}

---

Tự động xuống dòng – flex-wrap

📋 Copy.container {
  flex-wrap: wrap;
}

Nếu bạn có quá nhiều item, thêm thuộc tính này sẽ giúp các phần tử tự xuống dòng, không bị tràn.

---

3. Ví dụ: tạo layout 3 khối nằm ngang

HTML:

📋 Copy<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

CSS:

📋 Copy.container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}

---

4. CSS Grid là gì?

CSS Grid là một hệ thống bố cục dạng lưới (grid) – giúp bạn chia giao diện thành hàng và cột cực kỳ rõ ràng.

Kích hoạt:

📋 Copy.container {
  display: grid;
}

Sau đó, bạn định nghĩa số cột và hàng:

📋 Copy.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 cột bằng nhau */
  grid-gap: 20px;
}

Hoặc:

📋 Copygrid-template-columns: repeat(3, 1fr);

---

5. Grid vs Flexbox – dùng khi nào?

Flexbox	Grid
Sắp xếp theo hàng hoặc cột	Sắp xếp theo dòng và cột cùng lúc
Phù hợp khi bạn chỉ cần sắp hàng ngang/dọc	Phù hợp khi bạn cần layout nhiều hàng – cột
Dễ dùng hơn	Mạnh mẽ hơn

Gợi ý:

• Menu ngang, danh sách item: dùng Flexbox
• Trang chia thành 2–3 cột (sidebar – content – ads): dùng Grid

---

6. Ví dụ: tạo bố cục trang blog 2 cột

HTML:

📋 Copy<div class="layout">
  <div class="sidebar">Menu</div>
  <div class="content">Bài viết</div>
</div>

CSS:

📋 Copy.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-gap: 20px;
  padding: 20px;
}

.sidebar {
  background: #eee;
  padding: 15px;
}

.content {
  background: #f9f9f9;
  padding: 15px;
}

Kết quả là một layout cực chuẩn: bên trái là menu, bên phải là nội dung.

---

7. Thực hành: làm layout dạng “card”

HTML:

📋 Copy<div class="card-list">
  <div class="card">Sản phẩm 1</div>
  <div class="card">Sản phẩm 2</div>
  <div class="card">Sản phẩm 3</div>
</div>

CSS với Flex:

📋 Copy.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  background: white;
  padding: 15px;
  border: 1px solid #ddd;
  width: calc(33.33% - 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Hoặc với Grid:

📋 Copy.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

---

8. Bài tập thực hành

1. Tạo một layout chia 3 phần:
   • Header (chiều cao 80px)
   • Main có 2 cột (menu bên trái, nội dung bên phải)
   • Footer (chiều cao 60px)
2. Dùng Flexbox hoặc Grid để canh chỉnh bố cục
3. Dùng màu nền khác nhau để dễ phân biệt
4. Responsive: khi thu nhỏ trình duyệt, menu xuống dưới nội dung

---

Kết bài – Bố cục giờ đã dễ như chơi!

Bây giờ bạn đã biết cách xếp mọi thứ vào đúng chỗ mà không cần “hack CSS” như thời xưa. Flexbox và Grid là hai công cụ cực mạnh, và bạn vừa mới chạm tay vào “vũ khí của dân frontend chuyên nghiệp”.

Trong bài tiếp theo, mình sẽ cùng bạn bắt đầu lập trình bằng JavaScript, để khiến web sống động và tương tác. Không chỉ đẹp mà còn thông minh!

Hẹn gặp bạn ở Bài 5: JavaScript cơ bản – Biến, hàm, điều kiện.
Chúng ta sẽ viết dòng code JavaScript đầu tiên của đời mình!