เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ: วิธีตรวจสอบและแก้ไขข้อบกพร่อง Flexbox ของ CSS
bookmark_borderbookmark
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณแก้ไขข้อบกพร่องของเลย์เอาต์ Flexbox ของ CSS ได้อย่างง่ายดาย แผงองค์ประกอบมีเครื่องมือแก้ไข Flexbox แบบ Context-Aware และการวางซ้อนที่ปรับแต่งได้
ดูวิดีโอเพื่อดูวิธีดำเนินการต่อไปนี้
- ใช้เครื่องมือแก้ไข Flexbox เพื่อเปลี่ยนคุณสมบัติ Flexbox ด้วยการคลิกปุ่มแทนการพิมพ์
- สลับการวางซ้อน Flexbox ในวิวพอร์ตเพื่อดูการเปลี่ยนแปลงที่คุณทําทันที
- ใช้ส่วนองค์ประกอบ > เลย์เอาต์ > Flexbox เพื่อดูรายการองค์ประกอบทั้งหมดและค้นหาองค์ประกอบเหล่านั้นในต้นไม้ DOM นอกจากนี้ คุณยังปรับแต่งสีการวางซ้อนได้ที่นี่
ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS flexbox โดยทั่วไปได้ที่ดู CSS > Flexbox
หากต้องการประสบการณ์การแก้ไขข้อบกพร่องแบบลงมือทำจริงในเครื่องมือสำหรับนักพัฒนาเว็บ ให้ทำตามบทแนะนำตรวจสอบและแก้ไขข้อบกพร่องของเลย์เอาต์ Flexbox ของ CSS
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2022-09-01 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2022-09-01 UTC"],[],[]]