💡 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日
Tự động xuống dòng (flex-wrap)
📌
Kết luận
Dùng flex-wrap: wrap để cho phép các phần tử con xuống dòng
📝 Mã thực tế tại đây
.container { display: flex; flex-wrap: wrap; }wrap để chúng có thể xuống dòng một cách tự nhiên.
Tổng kết
-flex-wrap: wrap bật tính năng xuống dòng
- Giá trị mặc định là nowrap (không xuống dòng)
- Thường dùng cho danh sách thẻ bài hoặc danh sách các tag
Hãy thử trong phần bài tập
Hãy thử tính năng xuống dòng bằng flex-wrap 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
Thiết lập để các phần tử con tự động xuống dòng nếu bị tràn khung chứa.
Gợi ý khi gặp khó khăn
flex-wrap: wrap;