Flexbox
flex-direction
เรียนรู้ว่า flex-direction กำหนดทิศทางของ Main Axis และเปลี่ยนการเรียงของ Flex Items อย่างไร
1. Core Idea
หลังจากเปิด display: flex แล้ว browser จะเรียง items ตาม Main Axis โดยค่าเริ่มต้นเป็นแนวนอน flex-direction คือ property ที่เปลี่ยนทิศทางของ Main Axis นี้
- row: เรียงซ้ายไปขวา เป็นค่าเริ่มต้น
- column: เรียงบนลงล่าง
- row-reverse และ column-reverse: เรียงย้อนทิศทางของแกนนั้น
2. Mental Model
ลองนึกถึงการวางการ์ดบนโต๊ะ คุณเลือกได้ว่าจะวางจากซ้ายไปขวา หรือวางซ้อนลงมาเป็นคอลัมน์ flex-direction คือคำสั่งที่บอกทิศทางการวางการ์ดเหล่านั้น
flex-direction เปลี่ยนทิศทางของ Main Axis
3. Rule / Definition
| ค่า | Main Axis | ผลลัพธ์ |
|---|---|---|
| row | แนวนอน | items เรียงซ้ายไปขวา |
| column | แนวตั้ง | items เรียงบนลงล่าง |
| row-reverse | แนวนอนย้อนกลับ | items เรียงขวาไปซ้าย |
| column-reverse | แนวตั้งย้อนกลับ | items เรียงล่างขึ้นบน |
4. Code Example
5. Recap
- flex-direction กำหนดที่ container
- row คือค่าเริ่มต้นของ flex container
- column ใช้เมื่อต้องการให้ flex items ซ้อนในแนวตั้ง