CSS Flexbox (Flexible Box) là một công cụ mạnh mẽ và hiện đại giúp bạn tạo bố cục hàng ngang, hàng dọc, căn giữa, giãn đều, v.v. dễ dàng hơn nhiều so với cách cũ như float.
Trong bài học này, chúng ta sẽ tìm hiểu:
- Cách kích hoạt Flexbox
- Khái niệm trục chính và trục phụ
- Các thuộc tính cơ bản để sắp xếp phần tử
Bạn chỉ cần hiểu bài này là đã có thể bắt đầu dùng Flexbox để tạo menu ngang, chia cột, căn giữa…
1. Kích hoạt Flexbox
Chỉ cần thêm:
.container {
display: flex;
}
→ Lập tức các phần tử con bên trong .container sẽ tuân theo quy tắc Flexbox.
2. Trục chính và trục phụ
a. Trục chính (main axis)
- Mặc định là ngang từ trái sang phải
- Điều khiển bởi thuộc tính
justify-content
b. Trục phụ (cross axis)
- Vuông góc với trục chính (mặc định là trục dọc)
- Điều khiển bởi
align-items
3. justify-content – căn theo trục chính
.container {
display: flex;
justify-content: center;
}
| Giá trị | Ý nghĩa |
|---|---|
flex-start | Dồn về đầu trục chính (trái) |
center | Căn giữa theo trục chính |
flex-end | Dồn về cuối trục chính (phải) |
space-between | Khoảng cách đều, đầu/cuối sát mép |
space-around | Khoảng cách đều cả hai bên mỗi item |
space-evenly | Khoảng cách hoàn toàn bằng nhau |
4. align-items – căn theo trục phụ
.container {
display: flex;
align-items: center;
}
| Giá trị | Tác dụng |
|---|---|
stretch | (mặc định) – kéo cao bằng nhau |
flex-start | Căn đầu trục phụ (trên) |
center | Căn giữa trục phụ |
flex-end | Căn về cuối trục phụ (dưới) |
baseline | Căn theo dòng chữ |
5. flex-direction – thay đổi hướng trục chính
.container {
display: flex;
flex-direction: row; /* mặc định */
}
| Giá trị | Trục chính là… |
|---|---|
row | Hàng ngang (trái → phải) |
row-reverse | Hàng ngang (phải → trái) |
column | Cột dọc (trên → dưới) |
column-reverse | Cột dọc (dưới → trên) |
6. Thực hành: Flexbox căn giữa ngang – dọc
style.css
.flex-container {
display: flex;
justify-content: center;
align-items: center;
background-color: #e1f5fe;
height: 200px;
border: 2px dashed #0288d1;
}
.box {
background: #0288d1;
color: white;
padding: 20px 30px;
font-weight: bold;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 14 – Flexbox cơ bản</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="box">Căn giữa bằng Flexbox</div>
</div>
</body>
</html>
7. Ghi nhớ
| Thuộc tính | Dùng để làm gì |
|---|---|
display: flex | Kích hoạt Flexbox cho container |
justify-content | Căn phần tử theo trục chính |
align-items | Căn phần tử theo trục phụ |
flex-direction | Đổi hướng trục chính (ngang ↔ dọc) |
Thảo luận