💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Dàn hàng bằng Flexbox
📌
Kết luận
Dùng display: flex để xếp các phần tử con nằm ngang
📝 Mã thực tế tại đây
.container { display: flex; }Các thuộc tính chính
| Thuộc tính | Hiệu quả |
|---|---|
justify-content | Căn chỉnh theo trục chính (ngang) |
align-items | Căn chỉnh theo trục phụ (dọc) |
gap | Khoảng cách giữa các phần tử con |
flex-direction | Hướng sắp xếp (hàng hoặc cột) |
Khi nào nên dùng Flexbox?
| Mục đích | Flexbox hay Grid |
|---|---|
| Thanh menu nằm ngang | Flexbox ✅ |
| Căn trái phải cho Header | Flexbox ✅ |
| Danh sách thẻ chia cột | Grid ✅ |
| Bảng điều khiển (Dashboard) | Grid ✅ |
Tổng kết
-display: flex xếp các phần tử con nằm ngang
- Dùng justify-content và align-items để điều khiển vị trí
- Là lựa chọn hàng đầu cho bố cục 1 chiều
Hãy thử trong phần bài tập
Hãy xếp 3 thẻ div nằm ngang bằng Flexbox nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy xếp 3 thẻ div nằm ngang bằng Flexbox.
Gợi ý khi gặp khó khăn
Thêm display: flex cho phần tử cha.