คุณสมบัติ order และการจัดลำดับภาพใหม่
เปลี่ยนลำดับการแสดงผลของรายการ flex โดยไม่เปลี่ยน DOM ด้วยคุณสมบัติ order
คุณสมบัติ order และการจัดลำดับภาพใหม่ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณสมบัติ order
คุณสมบัติ order เปลี่ยนลำดับการแสดงผลของรายการเฟล็กซ์และรายการกริดโดยไม่เปลี่ยนโครงสร้าง DOM ค่าเริ่มต้นคือ 0 ค่าที่สูงกว่าจะปรากฏทีหลัง ส่วนค่าลบจะปรากฏก่อน
พื้นฐานของ order
รายการจะแสดงผลจากค่าลำดับต่ำไปสูง รายการที่มีค่าลำดับเท่ากันจะแสดงตามลำดับใน DOM
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
ลำดับติดลบ
ใช้ค่าติดลบเพื่อย้ายรายการไปไว้ก่อนรายการเริ่มต้นทั้งหมดที่มีค่า order:0:
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
การจัดลำดับใหม่ตามการตอบสนอง
เปลี่ยนลำดับการแสดงผลที่จุดเปลี่ยนตามขนาดหน้าจอที่แตกต่างกันโดยไม่เปลี่ยน HTML:
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
สำคัญ: คำเตือนด้านการเข้าถึง
order เปลี่ยนเฉพาะลำดับการแสดงผล โปรแกรมอ่านหน้าจอและการนำทางด้วยแป้นพิมพ์จะทำตามลำดับ DOM ไม่ใช่ลำดับการแสดงผล การจัดลำดับใหม่ในภาพโดยยังคงให้ DOM อยู่ในลำดับการอ่านที่เป็นเหตุเป็นผลมีความสำคัญอย่างยิ่งต่อการเข้าถึง
ความไม่สอดคล้องของลำดับแท็บ
หากจัดลำดับรายการใหม่ในภาพด้วย order การโฟกัสด้วยแป้น Tab จะทำตามลำดับ DOM ซึ่งอาจแตกต่างจากลำดับการแสดงผล ทำให้ผู้ใช้แป้นพิมพ์สับสนในการนำทาง ควรใช้การจัดลำดับใหม่ในภาพเฉพาะเมื่อไม่ทำลายลำดับเชิงตรรกะ
กรณีการใช้งานที่เหมาะสมทั่วไป
การจัดลำดับใหม่ในภาพเป็นที่ยอมรับเมื่อ:
- รายการเหล่านั้นไม่ได้เป็นส่วนหนึ่งของลำดับที่ใช้ในการนำทาง (การจัดลำดับเพื่อการตกแต่ง)
- ลำดับการแสดงผลสอดคล้องกับการอ่านตามธรรมชาติ ซึ่งแตกต่างจากลำดับในซอร์สโค้ดด้วยเหตุผลด้านการจัดระเบียบโค้ด
ลำดับของเฟล็กซ์บ็อกซ์เทียบกับลำดับของกริด
คุณสมบัติ order ทำงานเหมือนกันทั้งในเฟล็กซ์บ็อกซ์และ CSS โดยควบคุมลำดับภายในอัลกอริทึมการจัดวาง ไม่ใช่ลำดับใน DOM
order กับ flex-wrap
เมื่อรายการถูกตัดไปขึ้นบรรทัดใหม่ order จะกำหนดว่ารายการใดปรากฏในบรรทัดใด และมีลำดับอย่างไรภายในแต่ละบรรทัด
การกลับลำดับรายการทั้งหมด
หากต้องการกลับลำดับรายการทั้งหมด ให้ใช้ flex-direction: row-reverse หรือ column-reverse แทนการตั้งค่าลำดับติดลบให้กับทุกรายการ วิธีนี้สื่อความหมายได้ชัดเจนกว่าและเรียบง่ายกว่า
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
แอนิเมชันด้วยการจัดลำดับ
การเปลี่ยนลำดับไม่สามารถทำแอนิเมชันใน CSS ได้ หากต้องการจัดลำดับใหม่แบบมีแอนิเมชัน ให้ใช้ทรานส์ฟอร์มหรือแอนิเมชันที่ขับเคลื่อนด้วย JavaScript เช่น Flip.js หรือปลั๊กอิน Flip ของ GSAP
ตรวจสอบอย่างรวดเร็ว
เหตุใดจึงควรใช้คุณสมบัติ order เพื่อจัดลำดับลิงก์นำทางอย่างระมัดระวัง
สรุปทบทวน
order เปลี่ยนตำแหน่งที่มองเห็นของรายการในเฟล็กซ์/กริดโดยไม่แก้ไข HTML ค่าเริ่มต้นคือ 0 ค่าที่ต่ำกว่าจะปรากฏก่อน ส่วนค่าที่สูงกว่าจะปรากฏทีหลัง ใช้สำหรับจัดลำดับใหม่ในเลย์เอาต์แบบตอบสนองโดยไม่เปลี่ยนโครงสร้าง DOM ควรตรวจสอบเสมอว่าลำดับการนำทางด้วยแป้นพิมพ์และลำดับของโปรแกรมอ่านหน้าจอยังคงสมเหตุสมผลเมื่อใช้การจัดลำดับใหม่
คำถามที่พบบ่อย
บทเรียน “คุณสมบัติ order และการจัดลำดับภาพใหม่” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คุณสมบัติ order และการจัดลำดับภาพใหม่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติ order และการจัดลำดับภาพใหม่”
เปลี่ยนลำดับการแสดงผลของรายการ flex โดยไม่เปลี่ยน DOM ด้วยคุณสมบัติ order คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “คุณสมบัติ order และการจัดลำดับภาพใหม่” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเขียนทับการจัดแนวรายการ Flex ด้วย align-self
- คุณสมบัติ order และการจัดลำดับภาพใหม่
- รูปแบบการเขียนแบบย่อของ Flex
- เลย์เอาต์ Flexbox ทั่วไป: แถบนำทาง การ์ด ออบเจ็กต์สื่อ