Test 4 — Box Model & Layout

# Test 4: Box Model & Layout

ทดสอบ Flexbox, Absolute/Fixed Positioning, และ Overflow Clipping

### Test 4.1 — Flexbox เบื้องต้น

flex-direction: row + justify-content: space-between:

กล่อง 1
กล่อง 2
กล่อง 3

flex-direction: row + justify-content: center:

Left
Center
Right

flex-direction: column:

แถวที่ 1 (column direction)
แถวที่ 2
แถวที่ 3

flex: 1 (กระจายเท่ากัน):

flex:1
flex:1
flex:1

flex: 1 + flex: 2 (สัดส่วน):

flex:1
flex:2 (กว้างกว่า 2 เท่า)
flex:1

align-items: center (จัดกลางแนวตั้ง):

เตี้ย
สูง
กลาง

flex-wrap: wrap:

item 1
item 2
item 3
item 4
item 5
✓ Flexbox layout ต้องจัดเรียงถูกต้องตาม property ที่ระบุ

### Test 4.2 — Position: Absolute / Fixed

position: relative + absolute child:

top:10 left:10
top:10 right:10
bottom:10 left:10
bottom:10 right:10
✓ position absolute/fixed ทำงานแล้ว — absolute ใช้ Yoga, fixed ซ้ำทุกหน้า

### Test 4.3 — Overflow: Hidden (Clipping)

overflow: hidden — ข้อความที่ล้นต้องถูกตัดทิ้ง:

ข้อความยาวมากๆ ที่ล้นออกจากกล่องขนาด 300×60px กล่องนี้มี overflow: hidden ดังนั้นข้อความที่ล้นต้องถูกตัดทิ้ง ไม่แสดงผลออกมานอกกรอบสี่เหลี่ยมสีแดง ถ้าคุณเห็นข้อความนี้ทั้งหมดก็แสดงว่า overflow: hidden ยังไม่ทำงาน

overflow: visible (ค่าเริ่มต้น):

ข้อความยาวมากๆ ที่ล้นออกจากกล่อง — กรณี overflow:visible ข้อความจะล้นออกมาข้างนอก ซึ่งเป็นพฤติกรรมปกติ

✓ overflow: hidden ทำงานแล้ว — ข้อความที่ล้นจะถูก clip

### Test 4.4 — Margin, Padding, Border (Box Model)

Box 1: margin:20px padding:16px border:3px solid:

กล่องที่มี margin, padding, border ครบ — ข้อความต้องอยู่ห่างขอบตามที่กำหนด

Box 2: Nested boxes (Box Model ซ้อนกัน):

กล่องนอก (padding:16px)

กล่องใน (padding:12px, margin:8px)

กล่องในสุด (padding:8px, margin:4px)

✓ Box model ต้องคำนวณ margin + padding + border ถูกต้อง ไม่ล้นกล่อง