Flexbox คืออะไร

Flexbox ย่อมาจาก Flexible Box Layout เป็นโมเดลเค้าโครง CSS (Cascading Style Sheets) ที่ออกแบบมาเพื่อให้วิธีการจัดเรียงและกระจายองค์ประกอบภายในคอนเทนเนอร์มีประสิทธิภาพและยืดหยุ่นมากขึ้น ช่วยให้คุณสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์และไดนามิก โดยเฉพาะอย่างยิ่งสำหรับการสร้างส่วนติดต่อผู้ใช้และเว็บเพจ

Flexbox ทำงานบนแกนเดียว ทั้งในแนวนอนหรือแนวตั้ง ซึ่งเรียกว่าแกนหลัก องค์ประกอบภายในคอนเทนเนอร์เรียกว่ารายการแบบยืดหยุ่น ด้วยการกำหนดลักษณะการทำงานและคุณสมบัติของคอนเทนเนอร์แบบยืดหยุ่นและรายการแบบยืดหยุ่น คุณสามารถควบคุมวิธีการจัดเรียงและแสดงได้

แนวคิดหลักใน Flexbox ได้แก่:

  1. Flex Container: องค์ประกอบหลักที่เก็บรายการดิ้น เมื่อตั้งค่าคุณสมบัติการแสดงผลเป็น “flex” หรือ “inline-flex” จะกลายเป็นคอนเทนเนอร์แบบ flex

  2. Flex Items: องค์ประกอบลูกภายในคอนเทนเนอร์แบบยืดหยุ่น สามารถจัดแนว จัดลำดับ และกำหนดขนาดได้ตามกฎของคอนเทนเนอร์แบบยืดหยุ่น

  3. Main Axis: แกนหลักที่มีการจัดเรียงรายการ Flex อาจเป็นแนวนอน (จากซ้ายไปขวา) หรือแนวตั้ง (บนลงล่าง) ซึ่งกำหนดโดยคุณสมบัติทิศทางแบบยืดหยุ่น

  4. Cross Axis: แกนตั้งฉากกับแกนหลัก ถ้าแกนหลักอยู่ในแนวนอน แกนขวางจะเป็นแนวตั้ง และในทางกลับกัน

  5. Flex Direction: กำหนดทิศทางแกนหลัก สามารถตั้งค่าเป็น “แถว” (ค่าเริ่มต้น) ซึ่งจัดเรียงรายการในแนวนอน หรือ “คอลัมน์” ซึ่งจัดเรียงรายการในแนวตั้ง

  6. Flex Wrap: กำหนดว่ารายการแบบยืดหยุ่นควรรวมหลายบรรทัดหรือไม่ หากเกินพื้นที่ว่างในคอนเทนเนอร์แบบยืดหยุ่น

  7. Flexbox Properties: Flexbox มีคุณสมบัติต่างๆ เพื่อควบคุมพฤติกรรมของรายการแบบยืดหยุ่น เช่น flex-grow, flex-shrink, flex-basis, align-items, justify-content, align-self และอื่นๆ อีกมากมาย คุณสมบัติเหล่านี้ช่วยให้คุณสามารถกำหนดวิธีการขยายรายการแบบยืดหยุ่น ย่อ จัดแนว และกระจายภายในคอนเทนเนอร์แบบยืดหยุ่น

Flexbox ช่วยลดความยุ่งยากในการสร้างเลย์เอาต์ที่ซับซ้อนซึ่งปรับให้เข้ากับขนาดหน้าจอและรูปแบบเนื้อหาต่างๆ มีความสามารถในการจัดตำแหน่งและการกระจายที่ทรงพลังและได้รับการสนับสนุนอย่างกว้างขวางจากเว็บเบราว์เซอร์สมัยใหม่ อย่างไรก็ตาม สำหรับความต้องการเค้าโครงขั้นสูง คุณอาจพิจารณาใช้ CSS Grid ซึ่งเป็นรูปแบบเค้าโครง CSS อื่นที่ทำงานร่วมกันได้ดีกับ Flexbox