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