Sau khi bạn đã nắm được trục chính và trục phụ trong Flexbox, bài này sẽ giúp bạn đi xa hơn:
- Cách căn giữa hoàn toàn cả chiều ngang lẫn chiều dọc
- Làm các phần tử giãn đều hoặc co lại tùy không gian
- Sử dụng wrap để chia hàng xuống dòng
- Làm quen với
gap– thuộc tính tạo khoảng cách rất tiện lợi
1. Căn giữa toàn bộ cả chiều ngang và chiều dọc
Bạn có thể căn giữa hoàn toàn một phần tử bằng cách:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
justify-content: giữa trục chính (mặc định ngang)align-items: giữa trục phụ (mặc định dọc)
Lưu ý: Container phải có chiều cao cụ thể để có thể căn giữa dọc.
2. Làm các phần tử co giãn bằng flex-grow, flex-shrink, flex-basis
.item {
flex: 1;
}
Tương đương với:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
→ Cho phép các phần tử chia đều không gian còn lại
Ví dụ:
.item1 {
flex: 2;
}
.item2 {
flex: 1;
}
→ item1 sẽ rộng gấp đôi item2.
3. Wrap – chia nhiều dòng
Mặc định Flexbox sẽ dồn tất cả phần tử vào một dòng, tràn cả container.
Bạn có thể cho nó tự động xuống hàng bằng flex-wrap:
.container {
display: flex;
flex-wrap: wrap;
}
→ Mỗi khi phần tử không đủ chỗ, nó sẽ tự xuống dòng.
4. Sử dụng gap – cách mới để tạo khoảng cách giữa phần tử
.container {
display: flex;
gap: 20px;
}
gap: tạo khoảng cách giữa các item trong Flexbox (hoặc Grid)- Hữu ích hơn
marginvì không cần xử lý item đầu/cuối
5. Thực hành
style.css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
background: #e3f2fd;
padding: 20px;
}
.item {
flex: 1 1 200px; /* grow – shrink – basis */
background: #64b5f6;
color: white;
padding: 30px;
text-align: center;
border-radius: 6px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 15 – Flexbox nâng cao</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
<div class="item">Box 4</div>
<div class="item">Box 5</div>
</div>
</body>
</html>
6. Ghi nhớ
| Thuộc tính | Ý nghĩa |
|---|---|
flex-wrap | Cho phép các item xuống dòng nếu không đủ chỗ |
flex: 1 | Item sẽ co giãn đều nhau |
gap | Tạo khoảng cách giữa các item mà không cần margin |
justify-content, align-items | Căn giữa, giãn đều theo trục chính và phụ |
Thảo luận