Khi nghĩ đến bố cục, chúng ta thường nghĩ đến thiết kế ở cấp trang. Nhưng các thành phần nhỏ hơn trong trang có thể có bố cục độc lập riêng.
Lý tưởng nhất là những bố cục ở cấp thành phần này sẽ tự động điều chỉnh, bất kể vị trí của chúng trên trang. Có thể có những trường hợp bạn không biết liệu một thành phần sẽ được đặt vào cột nội dung chính, thanh bên hay cả hai. Nếu không biết chắc chắn thành phần sẽ kết thúc ở đâu, bạn cần đảm bảo rằng thành phần có thể tự điều chỉnh theo vùng chứa của nó.
Lưới
Lưới CSS không chỉ dành cho bố cục cấp trang. Điều này cũng phù hợp với các thành phần nằm trong đó.
Trong ví dụ này, giả phần tử ::before và ::after tạo các đường trang trí ở hai bên tiêu đề. Bản thân tiêu đề là một vùng chứa lưới. Các phần tử riêng lẻ được bố trí sao cho các đường kẻ luôn lấp đầy khoảng trống có sẵn.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
Tìm hiểu cách kiểm tra bố cục dạng lưới trong Chrome DevTools.
Flexbox
Như tên gọi, bạn có thể dùng flexbox để làm cho các thành phần của bạn linh hoạt. Bạn có thể khai báo những phần tử nào trong thành phần của bạn phải có kích thước tối thiểu hoặc tối đa và cho phép các phần tử khác linh hoạt điều chỉnh cho phù hợp.
Trong ví dụ này, hình ảnh chiếm 1/4 không gian có sẵn và văn bản chiếm 3/4 còn lại. Tuy nhiên, hình ảnh không bao giờ lớn hơn 200 pixel.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Tìm hiểu cách kiểm tra bố cục flexbox trong Chrome DevTools.
Truy vấn vùng chứa
Flexbox giúp bạn thiết kế từ nội dung. Bạn có thể chỉ định các thông số của phần tử (độ hẹp, độ rộng) và để trình duyệt tìm ra cách triển khai cuối cùng.
Nhưng bản thân thành phần này không nhận biết được bối cảnh của nó. Nó không biết liệu có đang được dùng trong nội dung chính hay trong một thanh bên hay không. Điều này có thể khiến bố cục thành phần phức tạp hơn bố cục trang. Để có thể áp dụng các kiểu phù hợp theo ngữ cảnh, các thành phần của bạn cần biết nhiều hơn kích thước của khung hiển thị mà chúng nằm trong.
Với bố cục trang, bạn biết chiều rộng của vùng chứa vì vùng chứa là cửa sổ xem của trình duyệt; truy vấn nội dung nghe nhìn báo cáo kích thước của vùng chứa cấp trang.
Để báo cáo kích thước của bất kỳ vùng chứa nào, hãy sử dụng truy vấn vùng chứa.
Để bắt đầu, hãy xác định những phần tử đóng vai trò là vùng chứa.
main,
aside {
container-type: inline-size;
}
Điều này có nghĩa là bạn muốn truy vấn phương diện nội tuyến. Đối với các tài liệu bằng tiếng Anh, đó là trục ngang. Bạn sẽ thay đổi kiểu dựa trên chiều rộng của vùng chứa.
Nếu một thành phần nằm trong một trong các vùng chứa đó, bạn có thể áp dụng các kiểu tương tự như cách bạn áp dụng truy vấn nội dung nghe nhìn.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
Nếu một đối tượng đa phương tiện nằm trong một vùng chứa hẹp hơn 25em, thì các kiểu flexbox sẽ không được áp dụng. Hình ảnh và văn bản xuất hiện theo thứ tự dọc.
Tuy nhiên, nếu phần tử chứa rộng hơn 25em, thì hình ảnh và văn bản sẽ xuất hiện cạnh nhau.
Với truy vấn vùng chứa, bạn có thể tạo kiểu cho các thành phần một cách độc lập. Bạn có thể viết các quy tắc dựa trên chiều rộng của phần tử chứa; chiều rộng của khung hiển thị không còn quan trọng nữa.
Kết hợp các truy vấn
Bạn có thể dùng truy vấn nội dung nghe nhìn cho bố cục trang và truy vấn vùng chứa cho các thành phần trong trang.
Trong đó, cấu trúc tổng thể của trang có một phần tử main và một phần tử aside.
Có các đối tượng đa phương tiện trong cả hai phần tử.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Truy vấn phương tiện áp dụng bố cục dạng lưới cho các phần tử main và aside khi khung nhìn rộng hơn 45em.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
Quy tắc truy vấn vùng chứa cho các đối tượng đa phương tiện vẫn giữ nguyên: chỉ áp dụng bố cục flexbox ngang nếu phần tử chứa rộng hơn 25em.
Truy vấn vùng chứa là một yếu tố thay đổi cuộc chơi đối với bố cục vi mô. Các thành phần của bạn có thể độc lập và không phụ thuộc vào khung hiển thị của trình duyệt.
Kiểm tra kiến thức của bạn
Kiểm tra kiến thức của bạn về bố cục vi mô.
Lưới và flexbox đều hữu ích cho bố cục vi mô?
Trước đây, bạn đã tìm hiểu về bố cục macro ở cấp trang. Giờ bạn đã biết về bố cục siêu nhỏ ở cấp thành phần.
Tiếp theo, bạn sẽ tìm hiểu sâu hơn về các khối xây dựng cơ bản của nội dung và tìm hiểu cách tạo hình ảnh thích ứng. Trước tiên, bạn sẽ tìm hiểu về kiểu chữ thích ứng.