Bài 6: CSS — bố cục với Flexbox

Bài 5 bạn đã tô màu và font cho trang. Nhưng mọi thứ vẫn xếp dọc từ trên xuống. Giờ ta học Flexbox — công cụ bố cục quan trọng nhất của web hiện đại — để xếp các khối thành hàng, căn giữa và chia đều khoảng cách. Cuối bài, phần “kỹ năng” của trang cá nhân sẽ thành một hàng thẻ gọn gàng thay vì danh sách dọc đơn điệu.

⏱️ Cách học bài này (~30 phút): đọc cách bật flex + các thuộc tính chính (12’), tự gõ và xem trình duyệt đổi (12’), lưu file mang về (6’).

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

Sau bài này bạn sẽ:

• Bật Flexbox bằng display: flex trên khối cha.
• Dùng justify-content (căn ngang) và align-items (căn dọc).
• Chia khoảng cách bằng gap, cho khối tự xuống hàng bằng flex-wrap.
• Xếp phần “kỹ năng” thành một hàng thẻ.

Nội dung: Flexbox cơ bản

1. Bật Flexbox

Flexbox hoạt động trên quan hệ cha – con: bật display: flex cho phần tử cha, các phần tử con sẽ tự xếp thành hàng ngang.

<div class="hang">
  <div class="o">HTML</div>
  <div class="o">CSS</div>
  <div class="o">JavaScript</div>
</div>

.hang {
  display: flex;     /* các .o bên trong xếp thành hàng ngang */
}

2. Căn chỉnh: justify-content & align-items

• justify-content — căn theo chiều ngang: flex-start (trái), center (giữa), flex-end (phải), space-between (chia đều hai mép), space-around.
• align-items — căn theo chiều dọc: flex-start, center, flex-end.

.hang {
  display: flex;
  justify-content: center;   /* căn giữa theo hàng ngang */
  align-items: center;       /* căn giữa theo chiều dọc */
}

3. Khoảng cách (gap) & tự xuống hàng (flex-wrap)

.hang {
  display: flex;
  gap: 16px;          /* khoảng cách đều giữa các khối con */
  flex-wrap: wrap;    /* khối con tự xuống hàng khi hết chỗ (tốt cho màn hình nhỏ) */
}

gap gọn hơn nhiều so với đặt margin cho từng khối. flex-wrap: wrap giúp trang không vỡ trên điện thoại.

Code mẫu có chú thích: hàng thẻ kỹ năng

Trong index.html, đổi danh sách kỹ năng thành các thẻ trong một khối cha:

<h2>Kỹ năng</h2>
<div class="ky-nang">
  <div class="the">Tiếng Anh</div>
  <div class="the">Tin học văn phòng</div>
  <div class="the">Giao tiếp</div>
</div>

Thêm vào style.css:

.ky-nang {
  display: flex;        /* xếp các thẻ thành hàng */
  gap: 12px;            /* cách đều nhau */
  flex-wrap: wrap;      /* tự xuống hàng trên màn hình hẹp */
}
.the {
  background-color: #2a7ae2;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;  /* bo tròn thành "viên thuốc" */
}

Cách chạy: lưu cả hai file, mở lại trang. Ba kỹ năng giờ nằm trên một hàng, cách đều, dạng thẻ bo tròn — thu nhỏ cửa sổ trình duyệt để thấy chúng tự xuống hàng.

Bài thực hành code (tự gõ)

Bài 1 — Hàng ngang: tạo một <div class="hang"> chứa 3 <div> con và cho .hang { display: flex; gap: 16px; }. Xem chúng xếp thành hàng.

Bài 2 — Căn giữa: thêm justify-content: center; và align-items: center; cho .hang rồi quan sát.
✅ Lưu ý: justify-content: center sẽ thấy rõ ngay (các khối dồn vào giữa). Nhưng align-items: center chỉ thấy rõ khi container cao hơn khối con — thử thêm .hang { height: 120px; } để thấy các khối nằm giữa theo chiều dọc (nếu không, đừng tưởng bạn gõ sai nhé).

Bài 3 — Thanh trên cùng: dùng Flexbox + justify-content: space-between; để đặt tên bạn ở bên trái và một liên kết ở bên phải trên cùng một hàng (mô phỏng thanh điều hướng).

Lỗi thường gặp & cách sửa

• display: flex không có tác dụng → bạn đặt nó nhầm cho phần tử con thay vì phần tử cha. Flex đặt trên khối bọc ngoài.
• Các khối không xuống hàng trên màn hình nhỏ → thiếu flex-wrap: wrap;.
• Lẫn justify-content và align-items → với hàng ngang: justify = ngang, align = dọc. Nhớ mẹo: justify chỉnh theo hướng xếp hàng.
• Khoảng cách không đều → dùng gap trên phần tử cha thay vì margin lẻ cho từng con.
• Ôn lại box model nếu cần: Bài 5 — CSS màu, font, box model.

💾 Mang về — hàng thẻ Flexbox

Giữ đoạn này để tái dùng (Bài 7 sẽ làm trang co giãn theo điện thoại — responsive):

/* Hàng các thẻ bằng Flexbox */
.ky-nang { display: flex; gap: 12px; flex-wrap: wrap; }
.the {
  background-color: #2a7ae2;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
}

Thuật ngữ chốt

Thuật ngữ	Giải thích ngắn
Flexbox	Cách xếp phần tử con thành hàng/cột, dễ căn chỉnh
display: flex	Bật Flexbox trên phần tử cha
justify-content	Căn theo chiều ngang (hướng xếp hàng)
align-items	Căn theo chiều dọc
gap	Khoảng cách đều giữa các khối con
flex-wrap: wrap	Cho khối con tự xuống hàng khi hết chỗ

Tự kiểm tra

1. display: flex đặt trên phần tử cha hay con? (Đáp án: phần tử cha)
2. Muốn các khối cách đều nhau dùng thuộc tính gì? (Đáp án: gap)
3. Với hàng ngang, justify-content: center căn theo chiều nào? (Đáp án: chiều ngang)

Ghi nhớ nhanh

• Bật Flexbox: display: flex trên phần tử cha.
• Căn: justify-content (ngang) + align-items (dọc); cách đều: gap.
• flex-wrap: wrap để khối tự xuống hàng — bước đầu thân thiện điện thoại.

Bài tập về nhà: biến phần “kinh nghiệm” hoặc menu của bạn thành một hàng Flexbox có căn chỉnh và khoảng cách đẹp. Bài tiếp theo: Bài 7 — CSS: responsive cho điện thoại (sắp đăng).