Bạn sẽ áp dụng Flexbox vào header của Góc học web: tên website, các liên kết menu và nhóm hành động có thể xuống dòng khi thiếu chỗ. Đây là bước từ ví dụ riêng lẻ sang thành phần dùng chung trên ba trang.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Chia thành các nhóm trước khi dàn hàng

Header gồm brand và nav. Nav chứa các liên kết. Đặt flex cho header điều khiển hai nhóm, còn đặt flex cho nav điều khiển các liên kết bên trong. Như vậy mỗi container có trách nhiệm rõ ràng, không cần chọn tất cả a trên toàn website.

Ở đây menu luôn hiện; không có nút hamburger giả chỉ để trông giống giao diện mẫu. Nếu sau này cần đóng/mở menu bằng nút, phải thiết kế hành vi và trạng thái tiếp cận phù hợp, không thể chỉ vẽ ba gạch bằng CSS rồi coi là đã có điều hướng.

Cho phép xuống dòng có chủ đích

flex-wrap:wrap cho các item chuyển sang dòng mới. Khi brand và nav không đủ chỗ, header có thể thành nhiều dòng. Gap duy trì khoảng cách mà không phải thêm margin đặc biệt cho từng phần tử cuối dòng.

Đừng ép nowrap và giảm chữ xuống quá nhỏ chỉ để giữ mọi thứ trên một hàng. Nội dung menu có thể dài hơn khi đổi ngôn ngữ hoặc người dùng tăng cỡ chữ; bố cục cần chịu được những thay đổi đó.

Nhóm nút và kích thước theo nội dung

Một nhóm liên kết hoặc nút có thể dùng display:flex và flex-wrap. Padding làm vùng thao tác dễ bấm hơn, nhưng phải xem cùng chiều cao dòng và khoảng cách giữa các mục. Liên kết vẫn cần tên rõ nghĩa và focus nhìn thấy.

Không dùng order để làm thứ tự nhìn khác hẳn thứ tự DOM chỉ nhằm đạt bố cục. Người dùng bàn phím thường vẫn đi theo thứ tự tài liệu; sự khác biệt có thể khiến họ khó dự đoán nơi focus tiếp theo.

Dùng lại cho ba trang

Cùng tên class site-header và site-nav được dùng trong các tệp của website. Một thay đổi CSS sửa cả ba trang; không cần mỗi trang sao chép một khối inline style khác nhau. Nếu một trang cần biến thể, hãy tạo một class bổ sung có ý nghĩa.

Kiểm tra header với tên website dài, menu thêm một mục và cửa sổ hẹp. Thành công không chỉ là ba liên kết hiện vừa trong ảnh chụp cố định; đó là vẫn đọc, bấm và điều hướng được khi nội dung thay đổi.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<div class="action-row"><a class="button" href="bai-viet.html">Đọc bài viết</a><a class="button" href="lien-he.html">Mở trang liên hệ</a></div>

Thêm hoặc sửa trong styles.css

.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid #cbd8e5; }
.brand { font-size: 1.35rem; font-weight: 700; color: #173957; text-decoration: none; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.site-nav a { padding: .45rem .65rem; border-radius: .35rem; text-decoration: none; }
.action-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }

So sánh trước và sau

Header và nhóm hành động có khoảng cách đều, có thể xuống dòng. Không có JavaScript hoặc cơ chế menu ẩn; mọi liên kết vẫn hoạt động theo HTML.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

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

• Chỉ tạo một flex container rồi mong điều khiển mọi tầng: chia đúng nhóm.
• Ẩn nav ở mobile nhưng chưa có cơ chế mở: giữ menu dùng được.
• Đổi order làm thứ tự đọc khác hiển thị: ưu tiên cấu trúc DOM hợp lý.

Tự kiểm tra

• Thêm một mục menu dài rồi thu hẹp cửa sổ.
• Dùng Tab qua menu và xác nhận thứ tự nhìn thấy phù hợp thứ tự focus.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML