Bố cục vi mô

Khi nói về bố cục, chúng ta thường nghĩ đến các thiết kế cấp trang. Tuy nhiên, 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à các 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ó 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 hay thanh bên hay cả hai. Nếu không biết chắc một 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ưu ý: Trong tương lai, việc tạo các thành phần có thể thích ứng với vùng chứa của chúng sẽ trở nên dễ dàng hơn nhiều khi triển khai Truy vấn vùng chứa. Tuy nhiên, hiện tại, bạn cần xem xét các cách hiện có để tạo bố cục vi mô thích ứng và có thể sử dụng lại. Bạn có thể xem trước cách Truy vấn vùng chứa phù hợp với các phương pháp thiết kế thích ứng hiện có ở cuối học phần này.

Lưới

Lưới CSS không chỉ dành cho bố cục cấp trang. API này cũng hoạt động tốt cho các thành phần nằm trong đó.

Trong ví dụ này, các phần tử giả ::before và ::after tạo các đường trang trí ở hai bên của tiêu đề. 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 luôn lấp đầy không gian 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;
}

Các trình duyệt dành cho máy tính như Firefox và Chrome có các công cụ cho nhà phát triển có thể hiển thị các đường lưới và các vùng phủ trên thiết kế của bạn.

Tìm hiểu cách kiểm tra bố cục lưới trong Công cụ của Chrome cho nhà phát triển.

Hộp linh hoạt

Đúng như tên gọi, flexbox cho phép bạn làm cho các thành phần linh hoạt. Bạn có thể khai báo các phần tử trong thành phần nên 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 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 không gian 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;
}

Các công cụ cho nhà phát triển trong Firefox và Chrome có thể giúp bạn minh hoạ hình dạng của các thành phần trong linh hoạt.

Tìm hiểu cách kiểm tra bố cục hộp linh hoạt trong Công cụ của Chrome cho nhà phát triển.

Truy vấn vùng chứa

Hộp linh hoạt cho phép bạn thiết kế từ nội dung bên ngoài. Bạn có thể chỉ định các thông số của các phần tử (mức độ hẹp của các phần tử, độ rộng của các phần tử đó) và để trình duyệt tìm ra cách triển khai cuối cùng.

Tuy nhiên, bản thân thành phần này không nhận biết được ngữ cảnh. Bot không biết đang được sử dụng trong nội dung chính hay trong thanh bên. Điều này có thể khiến bố cục thành phần phức tạp hơn so với bố cục trang. Để có thể áp dụng 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 về kích thước của khung nhìn mà chúng nằm bên 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à khung nhìn của trình duyệt; truy vấn phương tiện báo cáo kích thước của vùng chứa cấp trang.

Để báo cáo phương diện 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 phần tử nào sẽ đóng vai trò là vùng chứa.

main,
aside {
  container-type: inline-size;
}

Điều này có nghĩa là bạn có thể truy vấn phương diện cùng dòng. Đối với các tài liệu 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 bên trong một trong các vùng chứa đó, bạn có thể áp dụng các kiểu theo cách khá giống với truy vấn phương tiệ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 đối tượng nội dung nghe nhìn nằm trong một vùng chứa hẹp hơn 25em, thì kiểu flexbox sẽ không được áp dụng. Hình ảnh và văn bản xuất hiện được sắp xếp theo chiều dọc.

Tuy nhiên, nếu phần tử vùng chứa rộng hơn 25em, thì hình ảnh và văn bản sẽ xuất hiện cạnh nhau.

Truy vấn vùng chứa cho phép bạn tạo kiểu cho các thành phần theo cách độc lập. Chiều rộng của khung nhìn không còn là quan trọng nữa. Bạn có thể viết quy tắc dựa trên chiều rộng của phần tử vùng chứa.

Kết hợp các truy vấn

Bạn có thể sử dụng truy vấn phương tiện cho bố cục trang và truy vấn vùng chứa cho các thành phần trong trang.

Ở đây, 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 nội dung nghe nhìn trong cả hai thành phần.

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

Truy vấn nội dung đa phương tiện sẽ áp dụng bố cục lưới cho 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 nội dung nghe nhìn vẫn giữ nguyên: chỉ áp dụng bố cục hộp linh hoạt theo chiều ngang nếu phần tử vùng chứa rộng hơn 25em.

Thận trọng: Bản minh hoạ này không hoạt động trong một số trình duyệt. Trong Google Chrome, bạn có thể tìm thấy cờ #enable-container-queries tại chrome://flags.

Truy vấn vùng chứa là yếu tố đột phá đối với bố cục vi mô. Các thành phần của bạn có thể độc lập, độc lập với khung nhìn của trình duyệt.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về bố cục vi mô.

Lưới và hộp linh hoạt đều hữu ích cho bố cục vi mô?

Đúng

🎉

Sai

🎉 Lưới và flexbox đều rất hữu ích, ngay cả đối với bố cục "nhỏ nhất".

Trước đó, bạn đã tìm hiểu về bố cục macro cấp trang. Giờ đây, bạn đã biết về bố cục vi mô ở cấp thành phần. Tiếp theo, bạn sẽ tìm hiểu sâu hơn về các thành phần chính trong nội dung của mình. Bạn sẽ tìm hiểu cách giúp hình ảnh có khả năng thích ứng. Nhưng bây giờ, hãy cùng khám phá kiểu chữ thích ứng.