Bố cục linh hoạt: nguyên tắc xây dựng và sự khác biệt với bố cục thích ứng

Bố cục linh hoạt là gì

Bố cục linh hoạt (liquid layout, fluid layout) — một phương pháp bố cục trong đó kích thước của các phần tử được xác định bằng đơn vị tương đối thay vì pixel cố định. Điều này cho phép trang co giãn theo cửa sổ trình duyệt mà không cần cuộn ngang.

Khái niệm về bố cục linh hoạt xuất hiện trong thời đại màn hình máy tính để bàn với nhiều độ phân giải khác nhau. Vào những năm 2000, các trang web có chiều rộng cố định 960 pixel trông xấu trên màn hình 15 và 30 inch. Bố cục linh hoạt đã giải quyết vấn đề này.

Theo Web Almanac (2024), 78% trang web hiện đại sử dụng các yếu tố bố cục linh hoạt thông qua các đơn vị tương đối. Bố cục thuần linh hoạt ít phổ biến hơn — chủ yếu trong bảng điều khiển và dashboard.

Bối cảnh lịch sử

Bố cục linh hoạt trở nên phổ biến sau khi bài báo của John Allsopp “A Dao of Web Design” được xuất bản năm 2000, nơi ông kêu gọi từ bỏ pixel cố định để chuyển sang đơn vị tương đối. Bản tuyên ngôn này đã đặt nền tảng triết học cho toàn bộ thiết kế đáp ứng.

Các đơn vị đo lường tương đối: phần trăm, vw, vh

Các đơn vị tương đối chính trong CSS được chia thành hai nhóm: tương đối so với phần tử cha (phần trăm) và tương đối so với viewport (vw, vh, vmin, vmax). Mỗi nhóm giải quyết các nhiệm vụ riêng trong bố cục linh hoạt.

/* Percent — width relative to parent */
.sidebar {
    width: 30%;
}

.content {
    width: 70%;
}

/* vw/vh — viewport-based units */
.hero-section {
    width: 100vw;
    height: 80vh;
}

.fullscreen-modal {
    width: 90vmin;
}

Phần trăm được tính dựa trên chiều rộng của container cha. Các phần trăm lồng nhau có thể tạo ra các tính toán tầng đôi khi cho kết quả bất ngờ. Đơn vị vw/vh gắn với viewport và bỏ qua các container cha — thuận tiện cho các phần toàn màn hình.

Đơn vị rem cho phông chữ

Trong bố cục linh hoạt, điều quan trọng không chỉ là xác định chiều rộng khối bằng đơn vị tương đối mà còn là kích thước phông chữ. Đơn vị rem (root em) gắn kích thước văn bản với phần tử gốc HTML. Bằng cách thay đổi font-size trên html, bạn có thể co giãn toàn bộ văn bản trên trang.

/* Global text scaling via rem */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

.heading {
    font-size: 2.4rem; /* = 24px */
}

.body-text {
    font-size: 1.6rem; /* = 16px */
}

Bố cục linh hoạt so với thích ứng

Sự khác biệt chính giữa bố cục linh hoạt và thích ứng là bản chất của sự thay đổi chiều rộng. Bố cục linh hoạt thay đổi liên tục với mọi sự thay đổi kích thước cửa sổ, trong khi bố cục thích ứng thay đổi rời rạc thông qua media queries.

Bố cục linh hoạt là sự co giãn liên tục, bố cục thích ứng là sự chuyển đổi giữa các bố cục cố định. Mỗi phương pháp đều có ưu và nhược điểm.

Trong thực tế, hầu hết các trang web hiện đại sử dụng phương pháp kết hợp: lưới linh hoạt với đơn vị tương đối + media queries cho các điểm ngắt quan trọng. Bố cục thuần linh hoạt không có media queries có thể trông lộn xộn trên màn hình rộng hoặc rất hẹp.

Cách triển khai bố cục linh hoạt trong CSS

Triển khai cơ bản của bố cục linh hoạt bao gồm ba thành phần: đơn vị chiều rộng tương đối, các giới hạn tối đa/tối thiểu và flexbox hoặc grid để phân phối không gian.

/* Fluid grid with Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Fluid grid with CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Phương pháp Flexbox với flex: 1 1 30% tạo các thẻ chiếm khoảng 30% chiều rộng container nhưng có thể thu nhỏ xuống 250px. Khi có nhiều thẻ, chúng chuyển sang dòng tiếp theo. Phương pháp Grid với auto-fit và minmax tự động tạo các cột phù hợp với container.

Giới hạn: min-width và max-width

Vấn đề chính của bố cục thuần linh hoạt là trên màn hình rộng, dòng văn bản có thể kéo dài đến 2000+ pixel, khiến việc đọc trở nên bất khả thi. Các thuộc tính CSS min-width và max-width giải quyết vấn đề này.

/* Container limits for readability */
.content-wrapper {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

max-width: 1200px ngăn nội dung kéo dài trên màn hình siêu rộng. min-width: 320px đảm bảo chiều rộng tối thiểu của container trên màn hình nhỏ. Sự kết hợp của width: 90% + max-width tạo ra một container linh hoạt có trần — mẫu phổ biến nhất trong thiết kế web hiện đại.

Theo HTTP Archive (2025), 92% trang web trong top 1000 sử dụng max-width cho các khối nội dung. Giá trị tiêu chuẩn là 1140–1200 pixel cho bố cục desktop.

Phương pháp kết hợp: linh hoạt + thích ứng

Thiết kế web hiện đại hiếm khi sử dụng phương pháp thuần linh hoạt hoặc thích ứng. Phương pháp kết hợp tận dụng ưu điểm của cả hai: lưới linh hoạt với đơn vị tương đối + media queries cho các tái cấu trúc toàn cục.

/* Hybrid: fluid base + media query */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

Trên desktop, bố cục sử dụng các cột linh hoạt 1fr và 3fr — tỷ lệ được duy trì ở mọi chiều rộng cửa sổ. Trên di động, media query chuyển sang sơ đồ một cột, nơi các cột xếp chồng theo chiều dọc.

Lợi thế của phương pháp kết hợp là nhà phát triển viết ít media queries hơn, vì lưới linh hoạt tự động thích ứng với các kích thước trung gian. Media queries chỉ cần thiết cho các thay đổi cấu trúc quan trọng, không phải cho từng bước chiều rộng màn hình.