เปิด display:flex
ขั้นต่ำที่ใช้งานได้
ตั้ง flex ที่พ่อ · ลูกตรงกลายเป็น flex items โดยอัตโนมัติ
<div class="row"> <div>หนึ่ง</div> <div>สอง</div> <div>สาม</div> </div>
.row {
display: flex; /* ค่าเริ่มต้น: เรียงแนวนอนซ้ายไปขวา */
}
ผลลัพธ์ที่คาดหวัง
ลูกเรียงเป็นแถวในแนวเดียว แทนการซ้อนแนวตั้งแบบบล็อกปกติ
หลานที่ไม่ได้เป็นลูกตรง จะไม่ถูกจัดด้วยกฎ flex ของปู่ — ต้องดูว่า flex อยู่ชั้นไหน