home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การจัดลำดับ Flex Items แบบเดี่ยวด้วย CSS3 (Order Property)

Order Property: เปลี่ยนลำดับแสดงผล Flex Items โดยไม่ย้าย HTML

Property order ควบคุมลำดับของ flex items ค่า default = 0 ค่าน้อยกว่าจะอยู่หน้า ค่ามากกว่าจะอยู่หลัง ใช้ได้เฉพาะใน Flex/Grid container

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .container { height: 150px; display: flex; width: 100%; border: 2px solid red; }
    div { width: 200px; height: 150px; color: white; text-align: center; font-size: 30px; }
    .first { background-color: rgb(55, 0, 255); order: 2; }
    .second { background-color: red; order: 3; }
    .third { background-color: rgb(140, 0, 255); order: 1; }
  </style>
</head>
<body>
  <h1>ตัวอย่าง Reordering Flex Items</h1>
  <div class="container">
    <div class="first">First Div</div>
    <div class="second">Second Div</div>
    <div class="third">Third Div</div>
  </div>
</body>
</html>

การทำงาน

  • HTML order: First → Second → Third
  • CSS order: Third (1) → First (2) → Second (3)
  • ผลลัพธ์: Third, First, Second

กรณีใช้งานจริง

  • Responsive: สลับลำดับ Sidebar/Content บน Mobile vs Desktop
  • Featured item: ย้าย item สำคัญมาหน้าสุดบน Mobile
  • RTL support: สลับลำดับอัตโนมัติด้วย dir="rtl" + order

ข้อควรระวัง

  • Accessibility: Screen reader อ่านตาม DOM order ไม่ใช่ visual order – ใช้ order เฉพาะ visual reordering ไม่ใช่ logical reordering
  • tabindex ตาม DOM order – keyboard navigation ไม่เปลี่ยนตาม order

Grid ก็ใช้ order ได้

Grid items รองรับ order เช่นกัน ใช้ร่วมกับ grid-auto-flow: dense ช่วยเติมช่องว่าง