Mẹo cho nhà phát triển: Cách kiểm tra và gỡ lỗi CSS flexbox

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Sofia Emelianova

Công cụ của Chrome cho nhà phát triển giúp gỡ lỗi bố cục CSS flexbox một cách trực quan. Bảng điều khiển Elements (Thành phần) cung cấp cho bạn một Flexbox Editor (Trình chỉnh sửa Flexbox) có thể nhận biết bối cảnh và một lớp phủ có thể tuỳ chỉnh.

Hãy xem video để tìm hiểu cách:

• Sử dụng Flexbox Editor (Trình chỉnh sửa Flexbox) để thay đổi các thuộc tính flexbox bằng một thao tác nhấp vào nút thay vì nhập các thuộc tính đó.
• Bật/tắt lớp phủ flexbox trong khung nhìn để xem ngay những thay đổi bạn thực hiện.
• Sử dụng mục Elements (Thành phần) > Layout (Bố cục) > Flexbox (Hộp xếp linh hoạt) để xem danh sách tất cả các thành phần và xác định vị trí của các thành phần đó 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 phần Tìm hiểu CSS > Flexbox.

Để có trải nghiệm gỡ lỗi thực tế hơn trong Công cụ của Chrome 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 CSS flexbox.