Test 4: Box Model & Layout
ทดสอบ Flexbox, Absolute/Fixed Positioning, และ Overflow Clipping
Test 4.1 — Flexbox เบื้องต้น
flex-direction: row + justify-content: space-between:
flex-direction: row + justify-content: center:
flex-direction: column:
แถวที่ 1 (column direction)
แถวที่ 2
แถวที่ 3
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 ถูกต้อง ไม่ล้นกล่อง