Flexbox và Grid là hai công cụ layout mạnh nhất trong CSS hiện đại. Biết khi nào dùng cái nào là chìa khóa.
Flexbox vs Grid — Khi Nào Dùng Gì?#
| Flexbox | Grid |
|---|---|
| Bố cục 1 chiều (row hoặc column) | Bố cục 2 chiều (row và column) |
| Content-first — kích thước theo nội dung | Layout-first — chia lưới trước, đặt content sau |
| Navigation, card hàng ngang, center | Trang chính, dashboard, gallery |
Flexbox — Linh Hoạt Một Chiều#
Container#
.container {
display: flex;
flex-direction: row; /* mặc định: row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 16px; /* khoảng cách giữa các item */
}Items#
.item {
flex-grow: 1; /* item có thể giãn */
flex-shrink: 0; /* item không co lại */
flex-basis: 200px; /* kích thước cơ sở */
}
/* shorthand */
.item {
flex: 1 0 200px;
}Ví Dụ Thực Tế#
Header với nav trái-phải:
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
}Card grid responsive (không cần media query):
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 300px; /* tối thiểu 300px, giãn đều nếu còn chỗ */
}CSS Grid — Mạnh Mẽ Hai Chiều#
Container#
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 24px;
}Grid Template Areas — Trực Quan Nhất#
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
grid-template-columns: 250px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 16px;
}
header { grid-area: header; }
nav { grid-area: sidebar; }
main { grid-area: content; }
aside { grid-area: aside; }
footer { grid-area: footer; }Auto-fit / Auto-fill — Responsive Không Media Query#
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}auto-fill: tạo cột trống nếu thừa chỗ. auto-fit: co cột về 0, content giãn đầy.
Grid Item — Placement#
.featured {
grid-column: span 2; /* chiếm 2 cột */
grid-row: span 2; /* chiếm 2 hàng */
}
/* Hoặc dùng line numbers */
.featured {
grid-column: 1 / 3;
grid-row: 1 / 3;
}Holy Grail Layout — Flexbox + Grid#
<body>
<header>Header</header>
<div class="main">
<nav>Sidebar</nav>
<main>Content</main>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.main {
display: flex;
gap: 16px;
}
.main nav {
flex: 0 0 250px;
}
.main main {
flex: 1;
}
.main aside {
flex: 0 0 200px;
}
@media (max-width: 768px) {
.main {
flex-direction: column;
}
}Center — Tuyệt Chiêu#
/* Cách 1: Flexbox */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* Cách 2: Grid */
.parent {
display: grid;
place-items: center;
}
/* Cách 3: Absolute + transform */
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Mẹo Hay#
Sticky Footer#
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}Equal Height Columns#
/* Flexbox mặc định đã equal height (align-items: stretch) */
.flex-container {
display: flex;
}
/* Grid cũng vậy */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Kết Luận#
- Flexbox cho component nhỏ, layout 1 chiều
- Grid cho layout trang, layout 2 chiều
- Kết hợp cả hai cho kết quả tốt nhất
gapthay margin — sạch hơn, dễ kiểm soátminmax()+auto-fill= responsive không cần media query
Bỏ float, bỏ table layout. Flexbox và Grid là tất cả những gì bạn cần.