กลับไปหน้าหลัก
บทที่ 3: Layout Components
เรียนรู้การจัด Layout ด้วย Box, Container, Stack สำหรับมือใหม่! 📦
Box Component
Container
Stack
Responsive
💡 ทำไม MUI v7 แนะนำ Box แทน Grid?
• 🚀 Performance ดีกว่า: Box ใช้ CSS Grid/Flexbox โดยตรง
• 🎯 ยืดหยุ่นกว่า: ปรับแต่งได้ทุกอย่างผ่าน sx prop
• 📱 Responsive ง่ายกว่า: breakpoints ใน sx prop
• 🔧 Bundle size เล็กกว่า: ไม่มี extra JavaScript logic
🎯 เมื่อเรียนจบบทนี้ คุณจะสามารถ:
- ใช้ Box จัด Layout ได้
Flexbox, Grid, Positioning
- Container & Stack อย่างเป็นระบบ
การกำหนดขนาดและจัดเรียง
- Responsive Layout
ปรับตาม screen size
- Layout Patterns
Two columns, Card grid, Center
- Spacing System
padding, margin, gap อย่างเป็นระบบ
- สร้างหน้าเว็บจริง
ใช้ความรู้ประยุกต์ทำโปรเจค
📦 รู้จัก Layout Components
Layout Components ใน MUI คือเครื่องมือสำหรับจัดวางและจัดระเบียบ UI elements ให้อยู่ในตำแหน่งที่ต้องการ
🔧 Components หลักที่ใช้บ่อย
📄
Container
กำหนดความกว้างสูงสุดและจัดกึ่งกลาง
เหมือนกรอบรูปที่กำหนดขนาดและจัดกึ่งกลางเนื้อหา
📦
Box
ตัวจัด Layout ที่ยืดหยุ่นที่สุด
เหมือน div ที่มีพลังพิเศษ ปรับแต่งได้ทุกอย่าง
📚
Stack
จัดเรียง elements แนวตั้งหรือแนวนอน
เหมือนการเรียงของต่อกัน มีช่องว่างสม่ำเสมอ