เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณแก้ไขข้อบกพร่องของเลย์เอาต์ Flexbox ของ CSS ได้อย่างง่ายดาย แผงองค์ประกอบมีเครื่องมือแก้ไข Flexbox แบบ Context-Aware และการวางซ้อนที่ปรับแต่งได้
ดูวิดีโอเพื่อดูวิธีดำเนินการต่อไปนี้
- ใช้เครื่องมือแก้ไข Flexbox เพื่อเปลี่ยนคุณสมบัติ Flexbox ด้วยการคลิกปุ่มแทนการพิมพ์
- สลับการวางซ้อน Flexbox ในวิวพอร์ตเพื่อดูการเปลี่ยนแปลงที่คุณทําทันที
- ใช้ส่วนองค์ประกอบ > เลย์เอาต์ > Flexbox เพื่อดูรายการองค์ประกอบทั้งหมดและค้นหาองค์ประกอบเหล่านั้นในต้นไม้ DOM นอกจากนี้ คุณยังปรับแต่งสีการวางซ้อนได้ที่นี่
ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS flexbox โดยทั่วไปได้ที่ดู CSS > Flexbox
หากต้องการประสบการณ์การแก้ไขข้อบกพร่องแบบลงมือทำจริงในเครื่องมือสำหรับนักพัฒนาเว็บ ให้ทำตามบทแนะนำตรวจสอบและแก้ไขข้อบกพร่องของเลย์เอาต์ Flexbox ของ CSS