เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ: วิธีตรวจสอบและแก้ไขข้อบกพร่อง Flexbox ของ CSS

Sofia Emelianova
Sofia Emelianova

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

ดูวิดีโอเพื่อเรียนรู้วิธีต่อไปนี้

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS Flexbox ได้ที่ดูข้อมูล CSS > Flexbox

หากต้องการประสบการณ์การแก้ไขข้อบกพร่องแบบลงมือทำเองในเครื่องมือสำหรับนักพัฒนาเว็บ ให้ทำตามบทแนะนำตรวจสอบและแก้ไขข้อบกพร่องเลย์เอาต์ Flexbox ของ CSS