CSS Flexbox Model ปรับปรุงจาก Box Model เดิม — ยังมี margin, padding, border, content แต่เพิ่มความยืดหยุ่นจัดเติมพื้นที่ด้วย child elements
บทช่วยสอนนี้ช่วยเข้าใจ flexbox module เพื่อทำเว็บ responsive
โค้ดเริ่มต้น
.parent-container { height: 700px; background: green; width: 700px; padding: 20px; } .child-item { height: 200px; width: 200px; margin: 0; padding: 20px; }
Parent Container (Flexbox) Properties
display: flex
ทำให้ parent container กลายเป็น flex container — child elements จัดเรียงแนวนอน (default) แทนที่จะซ้อนกันแบบ block
.parent-container { display: flex; }
flex-direction
กำหนด main axis: row (default, ซ้าย→ขวา), column (บน→ล่าง), row-reverse, column-reverse
main axis ↔ justify-content, cross axis ↔ align-items
flex-wrap
ค่าเริ่มต้น nowrap (ล้นคอนเทนเนอร์) ใช้ flex-wrap: wrap ให้ขึ้นบรรทัดใหม่อัตโนมัติ มี wrap-reverse (ล่าง→บน)
flex-flow
Shorthand: flex-flow: column wrap (flex-direction + flex-wrap) ค่าเริ่มต้น row nowrap
justify-content (จัดแนว main axis)
flex-start(default): ชิดจุดเริ่มต้นflex-end: ชิดจุดสิ้นสุดcenter: กึ่งกลางspace-around: ระยะรอบๆ เท่ากันspace-between: ระยะระหว่างเท่ากัน ชิดขอบspace-evenly: ระยะทุกช่องเท่ากัน
align-items (จัดแนว cross axis)
ค่าเริ่มต้น stretch (ยืดเต็ม cross axis) ค่าอื่น: center, flex-start, flex-end, baseline — ความหมายเหมือน justify-content แต่บน cross axis
Child Container (Flex-item) Properties
order
ค่าตัวเลข กำหนดลำดับแสดงผล — ใช้เปลี่ยนลำดับ responsive (mobile/desktop)
align-self
ลบล้าง align-items ของ parent สำหรับ child ตัวนั้น — ค่า: flex-start, flex-end, center, baseline, stretch ต้องมี parent display: flex
สรุป
Flexbox = ความสัมพันธ์ parent-child ใช้ flex-direction, justify-content, align-items, flex-wrap บน parent ควบคุม child ใช้ order, align-self บน child ลบล้างค่า parent ลองเล่นโค้ดเพื่อเชี่ยวชาญ!
