Xây dựng một blog với Lưới và Flexbox

Sep 14, 2025

Cách

Hai đến ba năm qua đã thấy bố cục di chuyển về phía trước trong những bước nhảy vọt và giới hạn. Bây giờ những kỹ thuật hiện đại này có kết quả nhất quán trong các trình duyệt hiện đại, bạn thực sự có thể sử dụng chúng cho mã sản xuất của mình. Nếu bạn đang tự hỏi Làm thế nào để bắt đầu một blog , Hướng dẫn này sẽ chỉ cho bạn cách tạo cách tạo một bố cục kiểu blog tiêu chuẩn bằng cách sử dụng mô-đun hộp CSS và hộp linh hoạt, AKA Flexbox. Âm thanh như quá nhiều công việc khó khăn cho những gì bạn muốn? Hãy xem hướng dẫn của chúng tôi về Nền tảng blog miễn phí tốt nhất hoặc chọn một đỉnh người tạo ra trang web . Làm việc với một đội? Triển khai tốt nhất lưu trữ đám mây để giữ cho quá trình trơn tru.

Đầu tiên hãy nhanh chóng tóm tắt những điều cơ bản về HTML và tại sao nó tốt để thử và viết mã ngữ nghĩa.

Nhiều hơn máy tính để bàn và di động

Bạn đã nhận thấy chế độ người đọc trên Safari và Firefox chưa? Nó là một biểu tượng trong thanh địa chỉ trông giống như giấy lót. Điều này sẽ làm cho bạn Bố trí trang web Trong chế độ không bị phân tâm, không có xương, thay vì các thiết bị như Apple Watch sử dụng. Ngày càng có nhiều thiết bị đang truy cập và hiển thị nội dung web - có thể là hit lớn của Giáng sinh là những loa tương tác như Amazon Echo.

Với những điều này trong tâm trí, và tất nhiên sự cần thiết của trang web của bạn hoạt động trên trình đọc màn hình và tương tự, cấu trúc của trang của bạn là rất quan trọng. Nếu bạn chỉ sử dụng & lt; div & gt; Đối với tất cả các hộp đựng của bạn và thậm chí các nút, các thiết bị kết xuất mã của bạn sẽ không biết bối cảnh là gì và do đó không thể sử dụng bất kỳ chức năng hoặc tính năng gốc.

01. Bắt đầu bố cục trang cơ bản

Chúng tôi sẽ xây dựng một trang web cơ bản để bao gồm một tiêu đề với điều hướng, một khối anh hùng, bài viết chính, khối bài viết nổi bật và chân trang. Ý tưởng ở đây là nhìn thấy nhiều thiết kế web đáp ứng Kỹ thuật chúng ta có thể thực hiện mà không cần sử dụng truy vấn phương tiện hoặc bất kỳ JavaScript nào được hỗ trợ. Bạn có thể thấy rằng HTML của trang được chia thành các phần riêng biệt bằng các thẻ HTML5. Chúng tôi cũng thêm các lớp vào chúng, vì các trình duyệt cũ sẽ không biết họ là gì và khiến chúng trở thành một DIV. Hãy bắt đầu ở đầu trang và làm việc theo cách của chúng tôi. Tuy nhiên, cơ bản hoặc phức tạp trang web của bạn, đó cũng là thời gian để suy nghĩ về cái nào web hosting Dịch vụ phù hợp với bạn.

02. Xây dựng tiêu đề trang web

Build a blog with Grid and flexbox: Site header — Bạn sẽ không cần bất kỳ trình bao bọc hoặc container nào cho tiêu đề này

Tiêu đề của trang web chứa logo và một danh sách không có thứ tự cho điều hướng. Chúng tôi không cần thêm bất kỳ trình bao bọc hoặc thùng chứa nào để đặt nó ra với logo ở bên trái và điều hướng ở bên phải trong một dòng duy nhất.

 & lt; tiêu đề lớp = "Tiêu đề" & gt;

& lt; img src = "hình ảnh / logo.png" / & gt;
& lt; Nav & GT;
& lt; ul class = "nav" & gt;
& lt; li & gt; & lt; a href = "#"
lớp = "hoạt động" & gt; home & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; about & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; các con chó & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; contact & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / tiêu đề & gt;

03. Sử dụng đơn vị FR

Chúng tôi đặt tiêu đề để hiển thị lưới, sau đó sử dụng 'Get-Template-Cột' Để đặt hai cột trong tiêu đề. Chúng tôi sử dụng. Fr. Đơn vị ở đây, một đơn vị phân số - 1fr sẽ bằng không gian có sẵn trong thùng chứa. Trong trường hợp này, chúng tôi đang cung cấp cho một khu vực nhỏ hơn một chút để điền vào.

 Tiêu đề {
Hiển thị: lưới;
Mẫu lưới-Cột: 1,5fr 1fr;
Căn chỉnh các mặt hàng: trung tâm;
}

04. Thêm điều hướng trang web

Bây giờ chúng tôi nhắm mục tiêu danh sách các mục menu. Một lần nữa chúng ta biến & lt; ul & gt; vào một thùng chứa lưới và nói với các mục bên trong tự động truy cập vào các cột. Ở đây chúng tôi sử dụng nhỏ nhất lớn nhất Để đảm bảo các cột không bao giờ có thể nhỏ hơn 100px, nhưng nếu không gian lớn hơn thì chúng có thể chia sẻ không gian là 1FR mỗi.

 .nav {
Hiển thị: lưới;
Lưới-Template-Cột: Lặp lại (Tự động phù hợp, Minmax (100px, 1fr));
GRID-GAP: 10px;
Căn chỉnh các mặt hàng: trung tâm;
}

05. Tạo khối anh hùng

Build a blog with Grid and flexbox: Hero block — Định tâm văn bản anh hùng dễ dàng hơn nhiều với lưới css hoặc flex

Phần tiếp theo của trang là khối anh hùng chính. Theo truyền thống định tâm theo chiều dọc trong một thùng chứa yêu cầu tất cả các loại công việc xung quanh. Sử dụng lưới CSS hoặc Flex, điều này thực sự đơn giản.

 & lt; bài viết & gt;
& lt; phần Class = "Hero" & GT;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; a href = "" & gt; & lt; / a & gt;
& lt; / phần & gt;
& lt; / bài viết & gt;

06. Căn chỉnh đến trung tâm

Sắp xếp trên hai trục là một phần của bánh mì và bơ của lưới CSS. Ở đây, chúng ta có thể biến container anh hùng thành một thùng chứa lưới và sau đó sử dụng Căn chỉnh nội dung (trái sang phải) và Nội dung-Nội dung. (từ trên xuống dưới) đến vị trí ở trung tâm. Chúng tôi đang sử dụng một vh. Đơn vị ở đây, sẽ làm cho người anh hùng chặn 50% chiều cao của chế độ xem.

 .HERO {
Chiều cao tối thiểu: 50VH;
Hiển thị: lưới;
Các mặt hàng biện minh: Trung tâm;
Căn chỉnh nội dung: Trung tâm;
Nội dung biện minh: Trung tâm;
}

07. Tạo phần Nội dung chính

Bài viết chính cũng có một khối ở bên phải có chứa đọc thêm. Để thực hiện phản ứng đáp ứng này mà không cần phải sử dụng truy vấn phương tiện, chúng ta có thể chuyển sang Flexbox để tận dụng tối đa các thuộc tính của nó.

 & lt; bài viết Lớp = "Nội dung chính" & GT;
& lt; phần / & gt;
& lt; / phần & gt;
& lt; sang một bên / & gt;
& lt; / bài viết & gt;

08. Thêm một điểm xem hai cột

Đặt bài viết thành một container flex. Thêm một phần nhỏ vào bên trái và bên phải để đảm bảo thước đo văn bản không quá lâu. Hướng flex là hàng để phần và sang một bên sẽ nằm cạnh nhau khi theo kiểu. Nội dung được chứng minh là không gian giữa để văn bản sẽ không chạm vào bên cạnh.

 Nội dung chính {
Hiển thị: Flex;
Flex-Wrap: Wrap;
Hướng dẫn linh hoạt: Hàng;
nội dung biện minh: không gian giữa;
Đệm: 0 5VW 0 5VW;}

09. Làm cho nó đáp ứng mà không cần truy vấn phương tiện truyền thông

Build a blog with Grid and flexbox: Responsive without media queries — Tạo một phần đáp ứng mà không phải sử dụng truy vấn phương tiện

Phần này sử dụng sự pha trộn thông minh của calc và chiều rộng tối thiểu và tối đa để cung cấp cho chúng ta những gì hiệu quả truy vấn phương tiện nhưng ở mức container. Khi có đủ căn phòng, phần sẽ chiếm 70% cha mẹ, cho phép sang một bên ngồi cùng với nó. Bằng cách sử dụng Calc cho chiều rộng, chúng ta có thể trả về một chiều rộng lớn hoặc nhỏ.

 Phần nội dung chính {
Chiều rộng tối thiểu: 70%;
Chiều rộng: Calc ((48EM - 100%) * 1000);
chiều rộng tối đa: 100%;
}

10. Xác định điểm nghỉ

48EM tương đương với 768px (kích thước phông chữ cơ sở 48 * (16px)) như vậy trên 768px, phần sẽ có chiều rộng tối thiểu 70% và dưới 768 chiều rộng tối đa sẽ được sử dụng. Chúng tôi làm tương tự cho sang một bên, vì vậy trong trường hợp này, nó sẽ chiếm 25% trên màn hình lớn hoặc 100% trên nhỏ. Hiệu ứng là một điểm phá vỡ đáp ứng hoàn toàn ảnh hưởng đến container.

. Hàm lượng nội dung sang một bên {
Chiều rộng tối thiểu: 25%;
Chiều rộng: Calc ((48EM - 100%) * 1000);
chiều rộng tối đa: 100%;
}

11. Xây dựng các khối đáp ứng

Build a blog with Grid and flexbox: Responsive blocks — Sử dụng Divs Container để xây dựng các khối đáp ứng của bạn

Để tạo các mục nổi bật chạy trên trang, cuối cùng chúng tôi cũng sử dụng divs container đầu tiên của chúng tôi.

 & lt; phần Class = "Danh sách thẻ" & GT;
& lt; div class = "thẻ" & gt;
& lt; img / & gt;
& lt; div class = "chi tiết thẻ" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / phần & gt;

12. Lặp lại và tự động

Đối với danh sách thẻ của chúng tôi, chúng tôi muốn có bốn liên tiếp, nhưng vì chúng tôi không sử dụng bất kỳ truy vấn phương tiện nào chúng tôi đặt chúng tôi nhỏ nhất lớn nhất giá trị đến 300px, sẽ phù hợp độc đáo trên một điện thoại di động nhỏ. Bằng cách sử dụng Lặp lại và Tự động truy cập trình duyệt thực hiện công việc khó khăn và sẽ phù hợp với những gì nó có thể thành một hàng và sau đó khởi động một hàng khác, để chúng ta có thể đi từ bốn đến một bố cục cột duy nhất với một dòng mã.

 .Card-List {
Hiển thị: lưới;
GRID-GAP: 10px;
Cột lưới-Template: Lặp lại (Tự động phù hợp,
minmax (300px, 1fr));
Không thể

.Thẻ {
 Hiển thị: lưới;
 Cột lưới-Template: 1fr;
}

13. Tạo bố cục thẻ

Đối với các chi tiết trong thẻ, chúng tôi chuyển về Flex, đặt luồng thành cột để các mục luồng theo chiều dọc. Đặt. Nội dung-Nội dung. Tài sản cho phù hợp - Trong trường hợp này không gian đồng đều Hoạt động tốt. Vì thẻ 'A' trong bảng này sẽ hiển thị khối, nó sẽ kéo dài chiều rộng của container. Đặt nó thành. flex-start. để nó chỉ chiếm không gian nội dung của nó.

 .Card-Chi tiết {
Hiển thị: Flex;
Hướng dẫn: Cột;
Nội dung chứng minh: không gian đồng đều;
Không thể

.card-chi tiết a {
Align-Self: Flex-Start;
}

14. Phong cách chân trang

Chúng tôi đã xuống chân trang, và sẽ chỉ sử dụng một số kiểu chúng tôi đã sử dụng trước đó để đặt nó ra.

 & lt; Footer Class = "Footer" & GT;
& lt; p / & gt;
& lt; Nav & GT;
& lt; ul class = "nav" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul class = "xã hội" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / footer & gt;

15. Căn chỉnh vật phẩm trẻ em

Có ba khu vực trong chân trang này. Đặt các cột lưới của bạn để lặp lại ba tại một đơn vị phân số mỗi phần. Bạn chỉ có thể viết 'Mẫu lưới-Mẫu: 1fr 1fr 1fr;' Nếu bạn thích. Các biểu tượng xã hội sẽ ngồi thẳng sang phải - bạn có thể làm điều này bằng cách tự nói với chính vật phẩm để căn chỉnh ngay bằng cách sử dụng biện minh-self. .

 .footer {
Hiển thị: lưới;
Cột lưới-Template: Lặp lại (3, 1fr);
Lưới-Tự động lưu lượng: Cột;
Căn chỉnh các mặt hàng: trung tâm;
Không thể

.xã hội {
biện minh cho bản thân: kết thúc;
}

16. Xem xét khả năng tương thích

Mặc dù hướng dẫn này hoạt động tốt trên ba trình duyệt lớn và các thiết bị hiện đại, nhưng nó đã không được thử nghiệm trở lại IE. Tùy thuộc vào dự án của bạn, bạn có thể sử dụng nâng cao tiến bộ và phục vụ một bố cục đơn giản. Nếu CSS của bạn được tạo bằng cách sử dụng bộ tiền xử lý như Sass thì gói AutoPrefixer cung cấp một số tiền tố bổ sung cần thiết cho các lượt thích của Edge.

Bài viết này ban đầu được xuất bản trong số 284 của Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . MUA VẤN ĐỀ 284 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

Hướng dẫn toàn diện về việc sử dụng lưới CSS
Sử dụng Lưới CSS và Flexbox để xây dựng giao diện đáp ứng
5 Máy phát điện lưới CSS mát mẻ

Xây dựng một blog với Lưới và Flexbox

Nhiều hơn máy tính để bàn và di động

01. Bắt đầu bố cục trang cơ bản

02. Xây dựng tiêu đề trang web

03. Sử dụng đơn vị FR

04. Thêm điều hướng trang web

05. Tạo khối anh hùng

06. Căn chỉnh đến trung tâm

07. Tạo phần Nội dung chính

08. Thêm một điểm xem hai cột

09. Làm cho nó đáp ứng mà không cần truy vấn phương tiện truyền thông

10. Xác định điểm nghỉ

11. Xây dựng các khối đáp ứng

12. Lặp lại và tự động

13. Tạo bố cục thẻ

14. Phong cách chân trang

15. Căn chỉnh vật phẩm trẻ em

16. Xem xét khả năng tương thích

Cách - Các bài báo phổ biến nhất

Cách tạo biểu tượng ứng dụng trong Illustrator

Làm sắc nét mô hình hóa bề mặt cứng của bạn trong 3ds Max

Cách vẽ Zombie trong Paint Clip Studio

Tăng sức mạnh cho thực đơn của bạn bằng cách sử dụng hoạt hình với CSS

trồng cây ở Houdini

Cách tạo bảng Canvas của riêng bạn

Tạo một poster đánh máy bằng Adobe InDesign

Mô hình hóa hình học phức tạp: 5 mẹo hàng đầu

Thể loại