CSS layout cookbook
CSS layout cookbook hướng đến việc tập hợp các công thức cho các mẫu bố cục phổ biến — những thứ bạn có thể cần triển khai trong các trang web của mình. Ngoài việc cung cấp code để bạn có thể dùng làm điểm khởi đầu trong dự án, những công thức này còn làm nổi bật các cách sử dụng khác nhau của các đặc tả layout và những lựa chọn bạn có thể thực hiện với tư cách là nhà phát triển.
Note: Nếu bạn mới làm quen với CSS layout, trước tiên bạn có thể muốn xem qua mô-đun học tập CSS layout, vì đây sẽ cung cấp cho bạn nền tảng cơ bản cần thiết để sử dụng các công thức ở đây.
Các công thức
| Công thức | Mô tả | Phương pháp layout |
|---|---|---|
| Media objects | Một hộp hai cột với hình ảnh ở một bên và văn bản mô tả ở bên kia, ví dụ: bài đăng mạng xã hội. | CSS grid, phương án dự phòng float, kích thước fit-content |
| Columns | Khi nào nên chọn multi-column layout, flexbox hoặc grid cho các cột của bạn. | CSS grid, Multicol, Flexbox |
| Center an element | Cách căn giữa một phần tử theo chiều ngang và chiều dọc. | Flexbox, Box Alignment |
| Sticky footers | Tạo footer nằm ở dưới cùng của container hoặc viewport khi nội dung ngắn hơn. | CSS grid, Flexbox |
| Split navigation | Một mẫu điều hướng trong đó một số liên kết được tách biệt về mặt hiển thị với các liên kết còn lại. | Flexbox, margin |
| Breadcrumb navigation | Tạo danh sách các liên kết để cho phép người dùng điều hướng trở lại trong cấu trúc phân cấp trang. | Flexbox |
| List group with badges | Danh sách các mục có huy hiệu để hiển thị số đếm. | Flexbox, Box Alignment |
| Pagination | Liên kết đến các trang nội dung (chẳng hạn như kết quả tìm kiếm). | Flexbox, Box Alignment |
| Card | Một thành phần card, hiển thị trong lưới các card. | Grid Layout |
| Grid wrapper | Để căn chỉnh nội dung grid trong một wrapper trung tâm, đồng thời cho phép các phần tử vượt ra ngoài. | CSS grid |
Đóng góp một công thức
Cũng như với tất cả MDN, chúng tôi rất mong bạn đóng góp một công thức theo cùng định dạng như những công thức được hiển thị ở trên. Xem hướng dẫn thêm công thức Layout Cookbook để có mẫu và hướng dẫn viết ví dụ của riêng bạn.