Giới thiệu
Responsive design là yêu cầu cơ bản khi thiết kế website hiện đại. Hai công cụ CSS mạnh mẽ nhất để tạo bố cục linh hoạt là Flexbox và Grid. Bài viết này phân tích cách sử dụng chúng, so sánh ưu nhược điểm và đưa ra ví dụ thực tế cho người mới bắt đầu.
Flexbox cơ bản
Thuộc tính quan trọng
- display: flex – khai báo container là flexbox.
- flex-direction – xác định hướng chính (row hoặc column).
- flex-wrap – cho phép các mục tự động xuống dòng.
- justify-content – căn chỉnh các mục trên trục chính.
- align-items – căn chỉnh trên trục chéo.
- flex – viết tắt cho flex-grow, flex-shrink, flex-basis.
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.item {
flex: 1 1 200px; /* grow, shrink, basis */
margin: 5px;
}
Grid layout
Định nghĩa grid container
Grid cho phép chia không gian thành hàng và cột, phù hợp cho bố cục phức tạp. Các thuộc tính chính bao gồm:
- display: grid – khai báo container là grid.
- grid-template-columns và grid-template-rows – xác định số lượng và kích thước cột, hàng.
- gap – khoảng cách giữa các ô.
- grid-column / grid-row – đặt vị trí cho mục con.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: auto;
gap: 10px;
}
.grid-item {
background: #f2f2f2;
padding: 15px;
}
So sánh Flexbox và Grid
Flexbox tối ưu cho một chiều (row hoặc column) và các trường hợp nội dung thay đổi kích thước thường xuyên. Grid mạnh hơn khi cần kiểm soát hai chiều đồng thời, ví dụ như bố trí header, sidebar, content, footer. Thực tế, kết hợp cả hai thường mang lại kết quả tốt nhất: dùng Grid cho cấu trúc tổng thể, Flexbox cho các phần con cần sắp xếp linh hoạt.
Ví dụ thực tế: Header + Sidebar + Content + Footer
HTML markup
<div class="layout"> <header class="header">Header</header> <aside class="sidebar">Sidebar</aside> <main class="content">Content</main> <footer class="footer">Footer</footer> </div>
CSS styling
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; background: #4a90e2; }
.sidebar { grid-area: sidebar; background: #e2e2e2; }
.content { grid-area: content; background: #fff; }
.footer { grid-area: footer; background: #333; color: #fff; }
/* Khi màn hình < 768px, chuyển sang Flexbox */
@media (max-width: 768px) {
.layout {
display: flex;
flex-direction: column;
}
.sidebar { order: 2; }
.content { order: 3; }
}
Kết luận
Flexbox và Grid đều là công cụ thiết yếu để xây dựng giao diện responsive. Hiểu rõ khi nào dùng Flexbox, khi nào dùng Grid sẽ giúp giảm thời gian phát triển và cải thiện trải nghiệm người dùng. Tham khảo khóa học "HTML - CSS dành cho người mới bắt đầu" tại đây.
.png)
