Hôm nay chúng ta sẽ khám phá CSS Flexbox - công cụ dàn trang cực mạnh giúp tự động sắp xếp các phần tử thẳng hàng và dãn khoảng cách cực kỳ chuyên nghiệp.
display: flex; để kích hoạt bố cục Flexbox cho thẻ cha.justify-content và gap để căn chỉnh, tạo khoảng cách giữa các phần tử con.<header>, <footer>, <main>, <section> để tổ chức bố cục trang."Khi xếp các hộp đồ chơi lên kệ, nếu chúng ta xếp thủ công từng cái một thì sẽ rất mất thời gian và khó đều nhau. Sẽ thật tuyệt nếu chiếc kệ tự động hút các hộp đồ chơi xếp thẳng hàng ngang tăm tắp và tự động chia đều khoảng cách!
Trong thiết kế web, chiếc kệ thông minh đó được gọi là **CSS Flexbox**."
Giáo viên hướng dẫn cách kích hoạt Flexbox cho thẻ cha:
.ke-sach {
display: flex; /* Biến thẻ này thành kệ sách Flexbox */
}
Sau khi thiết lập display: flex; cho thẻ cha, ta sử dụng các thuộc tính phụ để căn chỉnh các thẻ con bên trong.
Trong Scratch, để các nhân vật (hoặc bản sao - clone) đứng cách đều nhau trên sân khấu, các em phải dùng phép tính toán chia tọa độ X phức tạp.
Trong CSS Flexbox, trình duyệt tự động tính toán thông qua các thuộc tính đơn giản:
.ke-sach {
display: flex;
justify-content: space-around; /* Dãn đều */
gap: 20px; /* Cách nhau 20px */
}
Để trang web có cấu trúc rõ ràng, dễ đọc cho cả người lập trình và máy tìm kiếm, HTML5 cung cấp các thẻ ngữ nghĩa thay vì lạm dụng quá nhiều thẻ <div>.
<header>: Chứa tiêu đề trang, logo hoặc thanh điều hướng menu.<main>: Chứa nội dung chính, quan trọng nhất của trang.<section>: Chia nhỏ trang web thành các phân đoạn, chủ đề khác nhau.<footer>: Chứa thông tin chân trang (bản quyền, liên hệ).Học sinh tìm hiểu kỹ thuật đặt tên biến, tên hàm rõ ràng, thêm chú thích (comments) trong JavaScript để mã nguồn sạch sẽ, dễ bảo trì khi dự án lớn dần lên.
// Đặt tên hàm rõ ràng theo hành động
function moRaoChanBaoVe() {
let rào = document.getElementById('rao-chan');
rào.style.display = 'none'; // Ẩn rào chắn đi
}
Mô tả: Thiết lập một trang web giới thiệu Khách Sạn Candy gồm tiêu đề nằm trong thẻ <header>, phần nội dung chính <main> sử dụng Flexbox để xếp thẳng hàng ngang 3 hộp hiển thị dịch vụ phòng nghỉ cách đều nhau tăm tắp.
bai21-1, tạo file index.html và style.css.index.html, thiết lập cấu trúc ngữ nghĩa gồm:
<header>
<h1>KHÁCH SẠN CANDY</h1>
</header>
<main>
<div class="ke-sach">
<div class="hop">Phòng VIP 👑</div>
<div class="hop">Phòng Đôi 👥</div>
<div class="hop">Phòng Đơn 👤</div>
</div>
</main>
<footer>
<p>Bản quyền thuộc về Candy Hotel</p>
</footer>
style.css để định dạng bố cục Flexbox cho thẻ cha:
.ke-sach {
display: flex;
justify-content: space-around;
gap: 20px;
}
.hop: thiết lập kích thước width: 150px;, height: 150px;, màu nền tươi sáng, bo góc nhẹ và căn giữa chữ bên trong hộp.