คู่มือนี้แสดงวิธีค้นหาองค์ประกอบ 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 เป็นแบบ Context-Aware ซึ่งจะเปลี่ยนไปตามทิศทางของเลย์เอาต์ ตัวอย่างเช่น เมื่อคุณเปลี่ยน flex-direction เป็น column ไอคอนในตัวแก้ไข Flex จะหมุนไปตามนั้น การวางซ้อนจะมีการอัปเดตทันทีเช่นกัน
ปรับสีการวางซ้อน Flexbox
เปิดแผงเลย์เอาต์ แล้วเลื่อนลงไปที่ส่วน Flexbox ดูองค์ประกอบ Flexbox ทั้งหมดของหน้าได้ที่นี่
คุณสลับการวางซ้อนขององค์ประกอบ Flexbox แต่ละรายการได้โดยเลือกช่องทำเครื่องหมายข้างองค์ประกอบนั้น ซึ่งจะเหมือนกับที่คุณคลิก badge ในแผนผัง DOM
นอกจากนี้ คุณยังเปลี่ยนสีของการวางซ้อนได้โดยคลิกที่ไอคอนสีที่อยู่ติดกัน เช่น สีของการวางซ้อน container เปลี่ยนเป็นสีดำ
หากต้องการไปยังองค์ประกอบ Flexbox ในแผนผัง DOM คุณสามารถคลิกไอคอนตัวเลือกข้างองค์ประกอบนั้นได้