Flexbox
align-items
เรียนรู้การจัดตำแหน่ง Flex Items บน Cross Axis และแยกหน้าที่ของ align-items ออกจาก justify-content
1. Core Idea
align-items จัดตำแหน่ง flex items บน Cross Axis หรือแกนที่ตั้งฉากกับ Main Axis ถ้า flex-direction เป็น row, align-items จะจัดแนวตั้ง
- stretch: ยืดเต็ม Cross Axis เท่าที่ทำได้ เป็นค่าเริ่มต้น
- flex-start: ชิดต้น Cross Axis
- center: อยู่กลาง Cross Axis
- flex-end: ชิดปลาย Cross Axis
2. Mental Model
ถ้า justify-content คือการเลื่อนของไปตามชั้นวาง align-items คือการเลือกว่าแต่ละชิ้นจะอยู่สูง กลาง หรือต่ำบนชั้นนั้น
align-items จัด items บน Cross Axis
3. Rule / Definition
| property | แกนที่จัด | ตัวอย่างเมื่อ direction เป็น row |
|---|---|---|
| justify-content | Main Axis | จัดซ้าย กลาง ขวา |
| align-items | Cross Axis | จัดบน กลาง ล่าง |
4. Code Example
5. Recap
- align-items ใช้กับ flex container
- มันจัด Cross Axis ไม่ใช่ Main Axis
- ถ้าต้องการกลางทั้งสองแกน ให้ใช้ justify-content กับ align-items ร่วมกัน