Bố cục linh hoạt

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 63 trên 76.

Trong thiết kế web đáp ứng, bố cục linh hoạt điều chỉnh theo nhiều kích thước màn hình bằng cách dùng lưới linh hoạt và các đơn vị tương đối như phần trăm thay vì giá trị pixel cố định. Nhờ đó, bố cục có thể mở rộng hoặc thu nhỏ để vừa với mọi màn hình, mang đến trải nghiệm mượt mà trên mọi thiết bị.

Các nguyên tắc chính của bố cục linh hoạt bao gồm:

Đơn vị tương đối: Dùng phần trăm (%), đơn vị khung nhìn (vw, vh) hoặc đơn vị em (em) thay cho pixel cố định (px) để đặt chiều rộng, chiều cao, lề và phần đệm.

Lưới linh hoạt: Dùng CSS Grid hoặc Flexbox để tạo bố cục dạng lưới có thể thích ứng với các kích thước màn hình khác nhau.

Chiều rộng tối đa và chiều rộng tối thiểu: Đặt chiều rộng tối đa và tối thiểu cho các phần tử để ngăn chúng quá rộng hoặc quá hẹp trên màn hình có kích thước cực đoan.

Đây là ví dụ về bố cục linh hoạt cơ bản sử dụng tỷ lệ phần trăm:

.container {
    width: 90%; /* Vùng chứa chiếm 90% chiều rộng của khung nhìn */
    max-width: 1200px; /* Vùng chứa không rộng quá 1200px */
}
.sidebar {
    width: 30%; /* Thanh bên chiếm 30% chiều rộng của vùng chứa */
    float: left;
}
.main-content {
    width: 70%; /* Vùng nội dung chính chiếm 70% chiều rộng của vùng chứa */
    float: left;
}

Trong ví dụ này, phần tử .container có chiều rộng linh hoạt là 90%, nghĩa là nó luôn chiếm 90% chiều rộng khung nhìn. Thuộc tính max-width được đặt thành 1200px để ngăn vùng chứa trở nên quá rộng trên màn hình lớn.

Các phần tử .sidebar và .main-content có chiều rộng linh hoạt lần lượt là 30% và 70%, giúp chúng thích ứng với chiều rộng của vùng chứa.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có một phần tử cha (<div>) chứa hai phần tử con (<div>) với các lớp sidebar và main. Nhiệm vụ của bạn là tạo bố cục co giãn bằng tỷ lệ phần trăm. Hãy làm theo các bước dưới đây:

Viết một quy tắc CSS nhắm đến phần tử <div> có lớp container. Đặt thuộc tính width thành 80% và margin thành 0 auto. Thêm border có giá trị 1px solid black để dễ quan sát.
Viết một quy tắc CSS nhắm đến phần tử <div> có lớp sidebar. Đặt thuộc tính width thành 25% và đặt phần tử trôi về bên trái.
Viết một quy tắc CSS nhắm đến phần tử <div> có lớp main. Đặt thuộc tính width thành 75% và đặt phần tử trôi về bên phải.

Tự làm thử

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>