Flexbox là một tính năng giao diện người dùng tương đối mới giúp xây dựng bố cục trang web (và làm cho nó đáp ứng!) Dễ dàng hơn nhiều so với trước đây.
Ngày trước, để xây dựng một trang web, bạn sẽ phải sử dụng lưới nổi hoặc thậm chí là bảng để làm cho bố cục của bạn trông giống như bình thường. Và những phương pháp đó không phải là tốt nhất cho thiết kế đáp ứng - đảm bảo trang web trông đẹp 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 các xu hướng phát triển web, bạn chắc chắn muốn biết cách sử dụng flexbox.
Bởi vì lưới nổi đang nhanh chóng trở thành dĩ vãng.
Hướng dẫn từng bước này sẽ đưa bạn qua quá trình xây dựng bố cục trang web đáp ứng đơn giản.
Dưới đây là cái nhìn nhanh về những gì bạn có thể trải qua trong hướng dẫn này:
Các bước để tạo bố cục trang web đơn giản
- Phác thảo bố cục sẽ trông như thế nào trên thiết bị di động, máy tính bảng và máy tính để bàn.
- Bắt đầu viết mã bố cục cơ bản, sử dụng HTML và CSS ngữ nghĩa.
- Đi từng phần một, xây dựng phần còn lại của bố cục.
- Trong CSS của bạn, hãy làm theo cách tiếp cận ưu tiên thiết bị di động, tạo kiểu cho độ rộng nhỏ nhất, sau đó tăng dần độ rộng lớn hơn.
Tôi sẽ giải thích các quy trình suy nghĩ của mình khi tiếp tục và chia sẻ những gì tôi nhận thấy là các phương pháp hay.
Nghe hay đấy? Hãy bắt đầu!
Tạo khung dây cho bố cục trang web
Wireframe là sơ đồ của tất cả các bộ phận tổ chức trên trang web của bạn. Chúng có thể siêu chi tiết, gần giống như thiết kế hoặc chúng có thể là cơ bản và chỉ ghi lại các khía cạnh chính.
Đối với mục đích của chúng tôi ở đây, chúng tôi sẽ có một wireframe rất cơ bản. Chúng tôi sẽ chia trang web thành các phần cốt lõi và quyết định mỗi phần sẽ trông như thế nào trên thiết bị di động, máy tính bảng và máy tính để bàn.
Các phần chúng tôi sẽ xây dựng bao gồm phần Header, Hero, Content, Sidebar và Footer.
Tôi sử dụng một công cụ trực tuyến có tên MockFlow để tạo khung dây cơ bản của mình.
Đây là bố cục thiết bị di động:
Bạn có thể thấy rằng tất cả các phần về cơ bản xếp chồng lên nhau trong một cột dài, bao gồm cả thanh bên.
Xếp chồng là cách cơ bản nhất để xếp nội dung một cách hiệu quả vào một thiết bị hẹp như điện thoại di động.
Sẽ không có ý nghĩa gì nếu bạn cố gắng đặt thanh bên cạnh nội dung thông thường, vì điện thoại không đủ rộng để đặt cả hai cạnh nhau.
Đang di chuyển về chiều rộng– đây là bố cục máy tính bảng:
Sự khác biệt chính ở đây là vì máy tính bảng rộng hơn nhiều so với điện thoại, giờ đây chúng ta có thể đặt thanh bên cạnh phần nội dung chính. Và tất cả các phần chiếm toàn bộ chiều rộng của máy tính bảng.
Và đối với thiết bị rộng nhất– đây là bố cục máy tính để bàn:
Đối với máy tính để bàn, bạn phải bắt đầu xem xét trang web của mình trông như thế nào trên các màn hình rất rộng. Đặc biệt là ngày nay với màn hình siêu rộng ngày càng phổ biến.
Nếu chúng tôi để nội dung trang web mở rộng toàn bộ chiều rộng trên một màn hình lớn, thì việc đọc và quét nội dung sẽ khó hơn.
Hãy tưởng tượng bạn buộc mắt phải di chuyển theo hướng từ bên trái sang bên phải. Như vậy là quá nhiều công việc và nó sẽ khiến người dùng của bạn mất đi.
Để làm cho trang web vẫn có thể đọc được trên màn hình rộng, chúng tôi đã giới hạn nội dung ở một chiều rộng nhất định và căn giữa nội dung. Điều này sẽ giúp việc đọc dễ dàng và trực quan hơn nhiều dù màn hình có lớn đến đâu.
Bây giờ chúng tôi biết chúng tôi muốn trang web trông như thế nào, chúng tôi sẽ bắt đầu phần thú vị - xây dựng mọi thứ bằng HTML và CSS!
Xây dựng các cấu trúc và kiểu cơ bản
Ánh xạ bố cục bằng các phần tử HTML
Làm việc từ các wireframe mà chúng tôi đã tạo, chúng tôi sẽ tạo một phần tử HTML cho từng phần trong wireframe.
Đây là đánh dấu trong <body> mà chúng tôi đang bắt đầu với:
<!-- 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>Bạn có thể thấy mỗi phần tử từ wireframe giờ có một phần tử tương ứng trong HTML như thế nào. Và tôi chỉ đưa vào văn bản giữ chỗ đơn giản, không có nội dung thực.
Bắt đầu thêm các thuộc tính CSS cơ bản
Bây giờ, hãy tập trung vào một số CSS siêu cơ bản để chúng ta có thể bắt đầu làm cho bố cục này trông đẹp mắt!
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 được hiển thị là một số kiểu rất chung chung, chẳng hạn như đặt kích thước hộp:hộp đường viền và kiểu phông chữ. Nhưng với mục đích của bài viết này, đây là những kiểu duy nhất bạn cần phải lo lắng.
Tôi muốn thêm đường viền vào các phần tử của mình để giúp xác định vị trí của mỗi phần tử dễ dàng hơn và khắc phục mọi sự cố lạ. Và tôi cũng đã thêm màu nền để phù hợp với mô hình khung dây mà chúng tôi đã làm trước đó.
Nếu chúng tôi mở tệp HTML trong trình duyệt, đây là những gì chúng tôi sẽ thấy!
Bạn có thể đã nhận thấy điều này, nhưng trang web trông khá giống với wireframe di động. Theo mặc định, mọi thứ được xếp chồng lên nhau.
Thêm một số nội dung giữ chỗ
Sau khi bạn đã tạo các phần tử HTML của mình, bạn cũng nên thêm một số nội dung trình giữ chỗ. Điều này sẽ làm cho trang web trông giống với những gì nó muốn khi bạn hoàn thành.
Bạn không cần phải quá ưa thích - chúng tôi sẽ chỉ sao chép và dán một số văn bản lấp đầy ipsum của lorem vào mỗi phần tử. Ví dụ:đây là những gì có trong yếu tố Anh hùng:
<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 ipsum lorem vào tất cả các phần tử, đây là giao diện của nó trong trang web:
Có vẻ tốt!
Bạn sẽ nhận thấy rằng tôi đã thêm các độ dài khác nhau của văn bản giữ chỗ vào mỗi phần tử, để phản ánh nội dung cuối cùng trông như thế nào.
Tối ưu hóa CSS cho điện thoại di động
Được rồi, về cơ bản chúng ta đã hoàn tất việc xây dựng bố cục cho thiết bị di động!
Một mẹo nữa để làm cho trang web trông đẹp mắt trên thiết bị di động là thêm một lớp đệm đồng nhất xung quanh các bên (và trên cùng và dưới cùng, nếu bạn muốn).
Điều này chỉ mang lại một chút không gian thở cho người dùng. Nếu không có khoảng đệm và lề bằng không, thì nội dung sẽ nằm ngay sát mép màn hình, điều này sẽ gây cảm giác chật chội.
Bạn không muốn thêm quá nhiều dung lượng để giữ cho nội dung có thể đọc được. Trong trường hợp này, tôi có đệm toàn cầu là 20px, nhưng bạn có thể thêm đệm 10px, 15px hoặc bất cứ thứ gì bạn cho là đẹp nhất.
Hãy chuyển sang thêm kiểu cho chế độ xem máy tính bảng.
Tạo bố cục hai cột cho máy tính bảng
Nếu chúng ta quay lại wireframe máy tính bảng, chúng ta sẽ thấy rằng nó có các phần tử Nội dung và Thanh bên cạnh nhau. Mọi thứ khác được xếp chồng lên nhau theo chiều dọc giống như trên thiết bị di động.
Chúng tôi cần thêm một số kiểu để Nội dung và Thanh bên được định dạng thành hai cột. Chúng tôi sẽ sử dụng flexbox cho việc này, trái ngược với lưới CSS.
Trước hết, chúng tôi sẽ thay đổi HTML của mình và bao bọc các phần tử Nội dung và Thanh bên trong một <div> chính rằng chúng tôi sẽ cung cấp một loại “flex-container”. (Sử dụng dấu ba chấm để đại diện cho đánh dấu bổ sung hiện không thực sự quan trọng)
<div class="flex-container">
<!-- Content -->
<section class="content">
Content
...
</section>
<!-- Sidebar -->
<aside class="sidebar">
Sidebar
...
</aside>
</div>Trước khi viết CSS, chúng tôi cần quyết định cách chúng tôi muốn Nội dung và Thanh bên hoạt động khi chúng tôi ở trong bố cục hai cột. Có một vài lựa chọn khác nhau và một lần nữa câu trả lời “đúng” tùy thuộc vào tình huống của bạn.
Điều tôi muốn là Thanh bên luôn có chiều rộng 300px và Nội dung chiếm phần còn lại của không gian đó.
Để thực hiện việc này, chúng tôi sẽ thêm các kiểu flexbox của mình trong CSS (một lần nữa sử dụng dấu ba chấm để thay cho mã bổ sung):
@media screen and (min-width: 640px){
.flex-container {
display: flex;
}
}Sử dụng truy vấn phương tiện, chúng tôi sẽ bật flexbox khi chiều rộng thiết bị từ 640px trở lên. Có nghĩa là trên điện thoại có chiều rộng nhỏ hơn, nó sẽ vẫn xếp chồng lên nhau. Khi đạt đến mốc 640 đó, nó sẽ chuyển sang bố cục flexbox.
.content {
flex: 1;
...
}
.sidebar {
flex: 0 1 300px;
...
}Đối với các phần tử Nội dung và Thanh bên, chúng tôi đã thêm thuộc tính flex.
Chúng tôi muốn chiều rộng Nội dung được tính bằng flexbox, vì vậy chúng tôi sẽ đặt nó thành flex: 1 , viết tắt của flex-grow: 1 , flex-shrink: 1 và flex-basis: 0% .
Đây là cài đặt flexbox “mặc định ”– nếu bạn đặt tất cả các phần tử con có flex: 1 , chiều rộng của chúng sẽ được tính toán và phân bổ đồng đều nhất có thể.
Trên Thanh bên, để đặt chiều rộng của nó thành 300px, chúng tôi sẽ sử dụng flex: 0 1 300px . Theo CSS-Tricks, thuộc tính cuối cùng đó, flex-base, “xác định kích thước mặc định của một phần tử trước khi phân phối không gian còn lại.”
Điều này sẽ đảm bảo rằng Thanh bên sẽ luôn có kích thước 300px và phần còn lại của không gian sẽ được phân phối cho phần Nội dung.
Đây là kết quả của việc đó!
Bây giờ, hãy thêm các kiểu của chúng tôi cho máy tính để bàn.
Giới hạn chiều rộng nội dung cho màn hình
Nếu chúng ta nhìn lại khung hình máy tính bảng và máy tính để bàn, chúng trông khá giống nhau. Cả hai đều có nội dung bên cạnh thanh bên.
Sự khác biệt chính đối với máy tính để bàn, như đã đề cập trước đó, là đặt chiều rộng tối đa cho nội dung chính. Điều này sẽ đảm bảo rằng trang web có thể đọc được ngay cả trên màn hình cực rộng.
Các lớp trợ giúp trong CSS
Vì chúng tôi có thể sẽ cần tập hợp các kiểu này cho nhiều phần tử, hãy tạo một lớp trợ giúp có thể dễ dàng sử dụng lại.
Chúng tôi sẽ thêm lớp mới và các kiểu đi kèm trong CSS của chúng tôi như sau:
.wrapper {
margin: auto;
max-width: 75rem;
}Điều này sẽ đặt chiều rộng tối đa của phần tử thành 1200px (được chuyển đổi thành đơn vị rem) và cũng căn giữa nó trên chiều rộng lớn hơn 1200px.
Trong HTML, chúng tôi sẽ thêm lớp wrapper vào trình bao bọc flex-container, vì chúng tôi muốn giới hạn chiều rộng cho vùng chứa Nội dung và Thanh bên.
Đánh dấu sau đó sẽ giống như sau:
<div class="flex-container wrapper">
…
</div>Và nếu chúng ta kiểm tra trang web trên chiều rộng lớn hơn, chúng ta có thể thấy rằng có thêm không gian xung quanh trình bao bọc Nội dung / Thanh bên, giống như chúng ta muốn 😁
Kết luận
Vậy là bạn đã có rồi - chúng tôi đã tạo một bố cục đáp ứng đơn giản trông đẹp mắt trên thiết bị di động, máy tính bảng và máy tính để bàn!
Nếu bạn muốn xem trang web đang hoạt động, bạn có thể xem bản trình diễn tại đây.
Và bạn có thể tải xuống tất cả mã cho dự án này từ GitHub của tôi tại đây.
* Lưu ý:dự án sử dụng Gulp và Sass. Nếu bạn cần trợ giúp cài đặt Gulp, hãy xem Hướng dẫn sử dụng Gulp đơn giản của tôi tại đây.
Cảm ơn vì đã đọc! Hãy cho tôi biết bạn nghĩ gì về hướng dẫn này trong phần bình luận bên dưới 😊