Flex Direction เป็นคุณสมบัติของ Flexbox ที่ใช้กำหนดทิศทางการจัดวางของ Flex items ว่าจะเรียงตามแนวนอน (row) หรือแนวตั้ง (column) โดยมีค่าเริ่มต้นเป็น row หรือแนวนอน
สามารถใช้คำสั่ง flex-direction ใน CSS เพื่อกำหนด Flex Direction ได้ โดยมีค่าที่สามารถกำหนดได้ดังนี้

Flex Direction
row (ค่าเริ่มต้น) : จัดวาง Flex items ในแนวนอนตามตัวแกน X
row-reverse : จัดวาง Flex items ในแนวนอนตามตัวแกน X แต่เรียงจากขวาไปซ้าย
column : จัดวาง Flex items ในแนวตั้งตามตัวแกน Y
column-reverse : จัดวาง Flex items ในแนวตั้งตามตัวแกน Y แต่เรียงจากล่างขึ้นบน
ตัวอย่างการใช้งาน Flex Direction:
.container { display: flex; flex-direction: row; /* จัดวาง Flex items ในแนวนอน */ }
.container { display: flex; flex-direction: column; /* จัดวาง Flex items ในแนวตั้ง */ }
**** ถ้าหากย่อขนาดแล้ว มีกล่องที่เกินออกมา ให้ใช้คำสั่ง Flex wrap

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana