Flexbox (Flexible Box Layout) là chế độ layout 1 chiều mạnh mẽ của CSS3, thiết kế cho việc phân phối không gian và căn chỉnh items trong container.
Container Properties (Áp dụng trên flex container)
| Property | Mô tả | Giá trị |
|---|
| display | Kích hoạt flex | flex | inline-flex |
| flex-direction | Hướng main axis | row | row-reverse | column | column-reverse |
| flex-wrap | Cho phép xuống hàng | nowrap | wrap | wrap-reverse |
| flex-flow | Shorthand direction + wrap | row wrap, column nowrap... |
| justify-content | Căn chỉnh main axis | flex-start | center | flex-end | space-between | space-around | space-evenly |
| align-items | Căn chỉnh cross axis (mỗi hàng) | stretch | flex-start | center | flex-end | baseline |
| align-content | Căn chỉnh các hàng (khi wrap) | stretch | flex-start | center | flex-end | space-between | space-around |
| gap / row-gap / column-gap | Khoảng cách giữa items | <length> |
Item Properties (Áp dụng trên flex items)
| Property | Mô tả |
|---|
| order | Thứ tự hiển thị (mặc định 0) |
| flex-grow | Khả năng lớn lên |
| flex-shrink | Khả năng co lại |
| flex-basis | Kích thước cơ sở |
| flex | Shorthand: grow shrink basis |
| align-self | Ghi đè align-items cho item riêng |
Ví dụ mã nguồn: Demo các container properties
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 20px;
padding: 20px;
background: #f5f5f5;
}
.sub-container {
display: flex;
width: 200px;
margin: 10px;
padding: 10px;
background: #f1f1f1;
border-radius: 4px;
}
.sub-container > div {
margin: 5px; padding: 10px; font-size: 20px; background: white; border: 1px solid #ddd;
}
/* Container 1: default (row, stretch) */
.c1 { align-self: flex-start; background: rgb(71, 30, 255); }
/* Container 2: justify-content: center */
.c2 { justify-content: center; align-self: flex-start; background: rgb(14, 126, 79); }
/* Container 3: flex-direction: column + align-items: center */
.c3 { flex-direction: column; align-items: center; background: rgb(168, 60, 10); }
.c3 > div { width: 80px; }
/* Container 4: default column (no align-items center) */
.c4 { background: rgb(26, 10, 168); }
.c4 > div { width: 80px; }
</style>
</head>
<body>
<h1>Flex Layout Model Demo</h1>
<div class="container">
<div class="sub-container c1"><div>1</div><div>2</div><div>3</div><small>Default: row, stretch</small></div>
<div class="sub-container c2"><div>1</div><div>2</div><div>3</div><small>justify-content: center</small></div>
<div class="sub-container c3"><div>1</div><div>2</div><div>3</div><small>column + align-items: center</small></div>
<div class="sub-container c4"><div>1</div><div>2</div><div>3</div><small>column default (stretch)</small></div>
</div>
</body>
</html>
Khi nào dùng Flexbox vs Grid?
- Flexbox: Layout 1 chiều (row HOẶC column), phân phối không gian động, alignment phức tạp, component-level
- Grid: Layout 2 chiều (row VÀ column), layout trang toàn cảnh, overlapping, explicit placement
- Kết hợp: Grid cho layout macro (header, sidebar, main, footer), Flexbox cho component micro (nav, card, form)
