Monday, 15 July 2024

การเรียงกล่อง แนวตั้ง-แนวนอน ด้วย Flex Direction

09 May 2019
117
luminox watches

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

สามารถใช้คำสั่ง flex-direction ใน CSS เพื่อกำหนด Flex Direction ได้ โดยมีค่าที่สามารถกำหนดได้ดังนี้

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

Thanat Sirikitphattana

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

Follow Us / Thanat Sirikitphattana