Sofia Emelianova
Công cụ của Chrome cho nhà phát triển giúp việc gỡ lỗi bố cục flexbox của CSS trở nên trực quan. Bảng điều khiển Elements (Phần tử) cung cấp cho bạn Trình chỉnh sửa Flexbox nhận biết theo bối cảnh và lớp phủ có thể tuỳ chỉnh.
Hãy xem video này để tìm hiểu cách:
- Sử dụng Trình chỉnh sửa Flexbox để thay đổi các thuộc tính hộp linh hoạt chỉ bằng một thao tác nhấp vào nút thay vì nhập các thuộc tính đó.
- Chuyển đổi lớp phủ hộp linh hoạt trong khung nhìn để xem những thay đổi bạn thực hiện ngay lập tức.
- Sử dụng mục Phần tử > Bố cục > Flexbox để xem danh sách tất cả các phần tử và tìm các phần tử đó trong cây DOM. Ngoài ra, bạn có thể tuỳ chỉnh màu lớp phủ tại đây.
Để tìm hiểu thêm về CSS flexbox nói chung, hãy xem Tìm hiểu về CSS > Flexbox.
Để có trải nghiệm gỡ lỗi thực tế hơn trong Công cụ cho nhà phát triển, hãy làm theo hướng dẫn Kiểm tra và gỡ lỗi bố cục flexbox của CSS.