Bài 8: CSS Flexbox – Bố cục linh hoạt
🎯 Mục tiêu
- Hiểu Flexbox là gì và khi nào nên dùng
- Biết trục chính (main axis) và trục phụ (cross axis)
- Dùng được các thuộc tính quan trọng:
display:flex,flex-direction,justify-content,align-items,gap,flex-wrap - Tạo bố cục hàng/cột, căn giữa nhanh chóng
📘 Lý thuyết ngắn
Flexbox là mô hình bố cục 1 chiều (hàng hoặc cột), rất mạnh để:
- Căn giữa phần tử
- Làm menu ngang
- Sắp xếp thẻ theo hàng/cột và tự co giãn
Trục trong Flexbox
flex-direction: row; /* trục chính: ngang (mặc định) */
flex-direction: column;/* trục chính: dọc */
justify-content: ...; /* căn theo trục chính */
align-items: ...; /* căn theo trục phụ */
🧾 Thuộc tính Flexbox hay dùng
| Thuộc tính | Ý nghĩa | Ví dụ |
|---|---|---|
display |
Bật Flexbox | display: flex; |
flex-direction |
Hướng sắp xếp | row | column |
justify-content |
Căn theo trục chính | center | space-between |
align-items |
Căn theo trục phụ | center | stretch |
gap |
Khoảng cách giữa item | gap: 12px; |
flex-wrap |
Xuống dòng khi chật | wrap |
💻 Code mẫu (Menu + Thẻ card bằng Flexbox)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 8 - CSS Flexbox</title>
<style>
body {
font-family: Arial;
padding: 24px;
background: #f7f8fa;
line-height: 1.7;
}
/* MENU NGANG */
.menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background: #111;
color: #fff;
padding: 12px 16px;
border-radius: 12px;
max-width: 900px;
margin: 0 auto 20px;
}
.menu .logo {
font-weight: 700;
}
.menu .links {
display: flex;
gap: 14px;
}
.menu a {
color: #fff;
text-decoration: none;
font-weight: 600;
}
/* DANH SÁCH CARD */
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.card {
flex: 1 1 260px; /* grow | shrink | basis */
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 16px;
}
.card h3 {
margin-top: 0;
}
.actions {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 20px;
}
button {
padding: 10px 14px;
border: 0;
border-radius: 10px;
cursor: pointer;
background: #2563eb;
color: #fff;
}
</style>
</head>
<body>
<!-- Menu -->
<div class="menu">
<div class="logo">MyWebsite</div>
<div class="links">
<a href="#">Trang chủ</a>
<a href="#">Khóa học</a>
<a href="#">Liên hệ</a>
</div>
</div>
<!-- Cards -->
<div class="cards" id="cards">
<div class="card">
<h3>HTML</h3>
<p>Tạo cấu trúc trang web.</p>
</div>
<div class="card">
<h3>CSS</h3>
<p>Làm đẹp giao diện.</p>
</div>
<div class="card">
<h3>JavaScript</h3>
<p>Tạo tương tác.</p>
</div>
</div>
<div class="actions">
<button id="btnAdd">Thêm card</button>
<button id="btnToggle">Đổi hướng</button>
</div>
<script>
const cards = document.getElementById("cards");
const btnAdd = document.getElementById("btnAdd");
const btnToggle = document.getElementById("btnToggle");
let isRow = true;
let count = 3;
btnAdd.addEventListener("click", () => {
count++;
const div = document.createElement("div");
div.className = "card";
div.innerHTML = "<h3>Card " + count + "</h3><p>Thêm bằng JS</p>";
cards.appendChild(div);
});
btnToggle.addEventListener("click", () => {
isRow = !isRow;
cards.style.flexDirection = isRow ? "row" : "column";
});
</script>
</body>
</html>
👉 Copy code → lưu thành bai8.html → mở bằng Chrome.
Thử đổi hướng (row/column) để thấy Flexbox hoạt động.
✍️ Bài tập
- Căn giữa menu theo chiều ngang (
justify-content: center). - Đổi menu thành cột dọc trên mobile (gợi ý: media query).
- Cho card có chiều cao bằng nhau.
- (Nâng cao) Thêm nút “Xóa card cuối”.
✅ Đáp án gợi ý
1) Căn giữa menu
.menu { justify-content: center; }
2) Menu dọc trên mobile
@media (max-width: 600px) {
.menu {
flex-direction: column;
}
}
4) Xóa card cuối (JS)
btnRemove.addEventListener("click", () => {
if(cards.lastElementChild){
cards.removeChild(cards.lastElementChild);
}
});
📌 Danh sách bình luận