Flexbox là một tính năng front-end tương đối mới, giúp việc xây dựng bố cục website (và làm cho nó responsive!) dễ dàng hơn rất nhiều so với trước đây.
Ngày xưa, để xây dựng một trang web, bạn phải dùng float grid hay thậm chí là table để bố cục trông như ý. Và những phương pháp đó không phải là tối ưu cho thiết kế responsive – đảm bảo website hiển thị tốt trên máy tính để bàn, máy tính bảng và thiết bị di động.
Nếu bạn muốn cập nhật xu hướng phát triển web, bạn chắc chắn cần biết cách sử dụng Flexbox.
Vì float grid đang nhanh chóng trở thành quá khứ.
Hướng dẫn từng bước này sẽ đưa bạn qua quy trình xây dựng một bố cục website responsive đơn giản.
Dưới đây là tổng quan nhanh về những gì bạn sẽ trải qua trong hướng dẫn này:
Các bước xây dựng bố cục website đơn giản
- Phác thảo bố cục trên mobile, tablet và desktop.
- Bắt đầu viết code cơ bản với HTML semantic và CSS.
- Xây dựng từng phần còn lại của bố cục theo từng section.
- Trong CSS, tuân theo phương pháp mobile-first: tạo style cho màn hình nhỏ nhất trước, sau đó mở rộng dần cho các màn hình lớn hơn.
Tôi sẽ giải thích quá trình tư duy và chia sẻ những phương pháp tốt nhất tôi đã tìm thấy.
Nghe hay không? Hãy bắt đầu nào!
Wireframe (Khung dây) cho bố cục website
Wireframe là sơ đồ các phần tổ chức của website. Chúng có thể chi tiết gần như thiết kế thực tế, hoặc cơ bản chỉ ghi lại các yếu tố chính.
Ở đây chúng ta sẽ dùng wireframe rất cơ bản. Chia website thành các section cốt lõi và quyết định mỗi section hiển thị như thế nào trên mobile, tablet và desktop.
Các section sẽ xây dựng bao gồm: Header, Hero, Content section, Sidebar và Footer.
Tôi dùng công cụ online MockFlow để tạo wireframe cơ bản.
Bố cục Mobile
Bạn thấy tất cả các section xếp chồng lên nhau thành một cột dài, kể cả sidebar.
Xếp chồng là cách cơ bản nhất để đặt nội dung hiệu quả trên thiết bị hẹp như điện thoại.
Không hợp lý khi cố gắng đặt sidebar cạnh content chính, vì màn hình điện thoại không đủ rộng để hiển thị cả hai cạnh nhau.
Bố cục Tablet
Khác biệt chính: tablet rộng hơn điện thoại nên có thể đặt sidebar cạnh content chính. Tất cả section chiếm toàn bộ chiều rộng tablet.
Bố cục Desktop
Trên desktop, cần cân nhắc hiển thị trên màn hình siêu rộng ngày càng phổ biến.
Nếu content kéo dài full-width trên màn hình lớn, việc đọc và lướt sẽ khó khăn hơn – mắt phải di chuyển quá xa từ trái sang phải, gây mệt mỏi và làm người dùng rời đi.
Để đảm bảo đọc dễ dàng trên màn hình rộng, chúng ta giới hạn chiều rộng content ở một mức nhất định và căn giữa. Điều này giúp đọc thoải mái, trực quan dù màn hình có lớn đến đâu.
Đã hình dung xong giao diện, giờ đến phần thú vị – xây dựng thực tế với HTML và CSS!
Xây dựng cấu trúc và style cơ bản
Lập bản đồ bố cục với các element HTML
Dựa trên wireframe, tạo một element HTML cho từng section.
Đoạn markup trong <body> để bắt đầu:
<!-- Main Content --> <main> Main <!-- Header --> <header> Header </header> <!-- Hero --> <section> Hero </section> <!-- Content --> <section> Content </section> <!-- Sidebar --> <aside> Sidebar </aside> <!-- Footer --> <footer> Footer </footer> </main>Mỗi element trong wireframe hiện có element HTML tương ứng. Tôi chỉ dùng text placeholder đơn giản, chưa có nội dung thực.
Thêm các thuộc tính CSS cơ bản
Thêm một chút CSS cơ bản để bắt đầu định dạng bố cục!
main, header, section, aside, footer { margin: 0; padding: 20px; border: 1px solid #000000; color: #ffffff; }
main { background: #000000; }
.header { background: #03a9f4; }
.hero { background: #d22b1f; }
.content { background: #129a22; }
.sidebar { border: 1px solid #000000; background: #673ab7; }
.footer { border: 1px solid #000000; background: #616161; }Không hiển thị các style chung như box-sizing: border-box và font, nhưng đây là những style quan trọng nhất cho bài viết.
Tôi thích thêm border cho element để dễ dàng xác định vị trí và khắc phục sự cố. Cũng thêm màu nền khớp với wireframe trước đó.
Mở file HTML trong trình duyệt, bạn sẽ thấy:
Bạn có thể nhận ra: website trông gần như giống hệt wireframe mobile. Mặc định mọi thứ đều xếp chồng lên nhau.
Thêm nội dung placeholder
Sau khi tạo xong element HTML, nên thêm nội dung placeholder để website trông gần hoàn thiện hơn.
Không cần phức tạp – chỉ copy-paste lorem ipsum vào từng element. Ví dụ Hero section:
<section class="hero"> Hero <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius. </p> </section>Sau khi thêm lorem ipsum cho tất cả element:
Trông不错! Lưu ý tôi dùng độ dài placeholder khác nhau cho từng element, mô phỏng nội dung thực tế.
Tối ưu CSS cho mobile
Về cơ bản đã xong bố cục mobile!
Mẹo nữa cho mobile: thêm padding đồng đều hai bên (và trên/dưới nếu muốn).
Điều này tạo khoảng thoáng cho người dùng. Nếu không có padding và margin, content sẽ dính vào mép màn hình, gây cảm giác chật chội.
Không nên thêm quá nhiều khoảng trống để giữ đọc dễ dàng. Ở đây tôi dùng padding toàn cục 20px, nhưng bạn có thể dùng 10px, 15px tùy ý.
Tiếp tục thêm style cho tablet.
Tạo bố cục 2 cột cho tablet
Quay lại wireframe tablet: Content và Sidebar cạnh nhau, các phần còn lại xếp dọc như mobile.
Cần style để Content và Sidebar thành 2 cột. Dùng Flexbox thay vì CSS Grid.
Đầu tiên, thay đổi HTML: bọc Content và Sidebar trong một <div> cha với class "flex-container".
<div class="flex-container"> <!-- Content --> <section class="content"> Content ... </section> <!-- Sidebar --> <aside class="sidebar"> Sidebar ... </aside> </div>Trước khi viết CSS, quyết định hành vi của Content và Sidebar trong bố cục 2 cột. Có vài lựa chọn, "đúng" tùy thuộc vào trường hợp của bạn.
Mong muốn: Sidebar luôn rộng 300px, Content chiếm phần còn lại.
Thêm style flexbox trong CSS (dùng ellipsis thay cho code bổ sung):
@media screen and (min-width: 640px){ .flex-container { display: flex; } }Dùng media query bật flexbox khi chiều rộng thiết bị ≥ 640px. Dưới đó vẫn xếp chồng.
.content { flex: 1; ... }
.sidebar { flex: 0 1 300px; ... }Cho Content và Sidebar thuộc tính flex.
Content: flex: 1 – viết tắt của flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Đây là setting mặc định – nếu tất cả con đều flex: 1, chiều rộng sẽ chia đều.
Sidebar: flex: 0 1 300px. Theo CSS-Tricks, flex-basis "định nghĩa kích thước mặc định trước khi phân phối không gian còn lại". Điều này đảm bảo Sidebar luôn 300px, phần còn lại cho Content.
Kết quả:
Giờ thêm style cho desktop.
Giới hạn chiều rộng content cho desktop
Wireframe tablet và desktop khá giống: cả hai đều có content cạnh sidebar.
Khác biệt desktop: đặt max-width cho content chính để đảm bảo đọc dễ dàng trên màn hình siêu rộng.
Helper class trong CSS
Vì cần tái sử dụng style này cho nhiều element, tạo helper class.
.wrapper { margin: auto; max-width: 75rem; }Đặt max-width 1200px (chuyển sang rem) và căn giữa trên màn hình > 1200px.
Trong HTML, thêm class wrapper vào flex-container:
<div class="flex-container wrapper"> … </div>Kiểm tra trên màn hình rộng: thấy khoảng trống hai bên wrapper Content/Sidebar, đúng như mong đợi 😁
Kết luận
Vậy là xong – đã tạo bố cục responsive đơn giản, đẹp trên mobile, tablet và desktop!
Xem demo thực tế tại đây.
Tải toàn bộ code dự án từ GitHub của tôi.
Lưu ý: dự án dùng Gulp và Sass. Cần giúp cài Gulp? Xem Hướng dẫn Gulp đơn giản của tôi.
Cảm ơn đã đọc! Hãy để lại bình luận bên dưới nhé 😊