คู่มือนี้จะแสดงวิธีค้นหาองค์ประกอบ Flexbox ในหน้าเว็บ รวมถึงวิธีตรวจสอบและแก้ไขเลย์เอาต์ Flexbox ในแผงองค์ประกอบ
ภาพหน้าจอที่ปรากฏในบทความนี้มาจากหน้าเว็บนี้: การจัดองค์ประกอบข้อความให้อยู่ตรงกลางด้วย Flexbox
สำรวจ CSS Flexbox
เมื่อองค์ประกอบ HTML ในหน้าเว็บมีการใช้ display: flex หรือ display: inline-flex คุณจะเห็นป้าย flex ถัดจากองค์ประกอบนั้นในแผงองค์ประกอบ
แก้ไขเลย์เอาต์ด้วยเครื่องมือแก้ไข Flexbox
คุณแก้ไขเลย์เอาต์ Flexbox ได้ด้วยเครื่องมือแก้ไข Flexbox ตัวอย่างเช่น นี่คือวิธีจัดข้อความให้อยู่กึ่งกลาง <h1> ของหน้าสาธิตนี้ภายในที่เก็บ <div class="container">
- ตรวจสอบองค์ประกอบคอนเทนเนอร์
- ในแผงรูปแบบ คุณจะเห็นปุ่มเครื่องมือแก้ไข Flexbox ข้างการประกาศ
display: flex
- คลิกเพื่อเปิดเครื่องมือแก้ไข Flexbox เครื่องมือแก้ไขจะแสดงรายการพร็อพเพอร์ตี้ Flexbox ตัวเลือกค่าของพร็อพเพอร์ตี้แต่ละรายการจะแสดงเป็นปุ่มไอคอน
- หากต้องการจัดข้อความให้อยู่กึ่งกลางของหน้าจอ คุณสามารถคลิกปุ่ม
justify-content: centerและalign-items: center
- ตอนนี้ข้อความอยู่กึ่งกลางแล้ว โปรดทราบว่ามีการเพิ่มการประกาศ
justify-content: centerและalign-items: centerในแผงรูปแบบ
ตรวจสอบเลย์เอาต์ Flexbox
วางเมาส์เหนือองค์ประกอบ Flexbox ในแผงองค์ประกอบเพื่อดูเลย์เอาต์ได้ องค์ประกอบที่วางซ้อนบนองค์ประกอบจะวางด้วยเส้นประเพื่อแสดงตำแหน่งของเนื้อหาและรายการต่างๆ
หรือคุณจะคลิกที่ป้ายเพื่อสลับการแสดงผลการวางซ้อน Flexbox ก็ได้
ลองเปลี่ยนค่าเป็น justify-content: flex-end ภาพซ้อนทับจะเปลี่ยนไปตามนั้น
ไอคอนในเครื่องมือแก้ไข Flex เป็นแบบคำนึงถึงบริบท โดยจะเปลี่ยนแปลงตามทิศทางของเลย์เอาต์ เช่น เมื่อเปลี่ยน flex-direction เป็น column ไอคอนในเครื่องมือแก้ไข Flex จะหมุนตามนั้น ระบบจะอัปเดตการวางซ้อนทันทีด้วย
ปรับสีการวางซ้อน Flexbox
เปิดแผงเลย์เอาต์และเลื่อนลงไปที่ส่วน Flexbox คุณดูองค์ประกอบ Flexbox ทั้งหมดของหน้าได้ที่นี่
คุณสลับการวางซ้อนขององค์ประกอบ Flexbox แต่ละรายการได้ด้วยช่องทำเครื่องหมายข้างๆ เช่นเดียวกับที่คุณคลิก badge ในแผนผัง DOM
นอกจากนี้ คุณยังสามารถเปลี่ยนสีของภาพซ้อนทับได้ โดยคลิกที่ไอคอนสีที่อยู่ติดกัน ตัวอย่างเช่น สีของการวางซ้อน container จะเปลี่ยนเป็นสีดำ
หากต้องการไปยังองค์ประกอบ Flexbox ในแผนผัง DOM ให้คลิกที่ไอคอนตัวเลือกที่อยู่ติดกัน