💡 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日
Căn lề hai đầu (space-between)
📌
Kết luận
Dùng justify-content: space-between để căn lề về hai đầu
📝 Mã thực tế tại đây
.header { display: flex; justify-content: space-between; }Các giá trị chính của justify-content
| Giá trị | Cách sắp xếp |
|---|---|
flex-start | Dồn về đầu (trái) |
flex-end | Dồn về cuối (phải) |
center | Căn giữa |
space-between | Hai đầu sát mép, khoảng cách giữa các phần tử bằng nhau |
space-around | Khoảng cách xung quanh mỗi phần tử bằng nhau |
Cách dùng phổ biến nhất
Bố cục Header với "Logo bên trái, Menu bên phải" chính là ví dụ điển hình nhất củaspace-between.
Tổng kết
-space-between đẩy các phần tử về hai đầu xa nhất
- Rất phù hợp cho bố cục thanh tiêu đề (Header)
Hãy thử trong phần bài tập
Hãy thử căn lề hai đầu 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
Sử dụng Flexbox để đẩy hai phần tử con về hai phía xa nhất.
Gợi ý khi gặp khó khăn
justify-content: space-between;