เปิด display:flex

ขั้นต่ำที่ใช้งานได้

ตั้ง flex ที่พ่อ · ลูกตรงกลายเป็น flex items โดยอัตโนมัติ

<div class="row">
  <div>หนึ่ง</div>
  <div>สอง</div>
  <div>สาม</div>
</div>
.row {
  display: flex; /* ค่าเริ่มต้น: เรียงแนวนอนซ้ายไปขวา */
}

ผลลัพธ์ที่คาดหวัง

ลูกเรียงเป็นแถวในแนวเดียว แทนการซ้อนแนวตั้งแบบบล็อกปกติ

หลานที่ไม่ได้เป็นลูกตรง จะไม่ถูกจัดด้วยกฎ flex ของปู่ — ต้องดูว่า flex อยู่ชั้นไหน