Flexbox
justify-content
เรียนรู้การจัดตำแหน่ง Flex Items ตาม Main Axis ด้วย justify-content และเลือกค่าที่เหมาะกับ layout
1. Core Idea
justify-content ควบคุมว่าพื้นที่ว่างบน Main Axis จะถูกวางไว้ตรงไหน ใช้กับ flex container และมีผลชัดเมื่อ items ไม่ได้กินพื้นที่เต็ม container
- flex-start: ชิดต้นแกน
- center: อยู่กลางแกน
- flex-end: ชิดปลายแกน
- space-between: item แรกและสุดท้ายชิดขอบ ช่องว่างอยู่ระหว่าง items
- space-around / space-evenly: กระจายช่องว่างรอบ items
2. Mental Model
นึกถึงชั้นวางที่กว้างกว่าสินค้าที่มีอยู่ justify-content คือวิธีบอกว่าจะเก็บพื้นที่ว่างไว้ซ้าย ขวา กลาง หรือกระจายระหว่างสินค้า
justify-content จัดพื้นที่ว่างตาม Main Axis
3. Rule / Definition
| ค่า | ผลที่เกิดขึ้น | เหมาะกับ |
|---|---|---|
| center | กลุ่ม items อยู่กลาง container | ปุ่มหรือกลุ่ม action |
| flex-end | กลุ่ม items ชิดปลายแกน | ปุ่มยืนยันใน dialog |
| space-between | ตัวแรกชิดต้น ตัวสุดท้ายชิดปลาย | โลโก้ซ้าย เมนูขวา |
| space-evenly | ช่องว่างทุกช่องเท่ากัน | tab bar หรือ nav ที่กระจายเต็มแถว |
4. Code Example
5. Recap
- justify-content จัดตาม Main Axis เสมอ
- ต้องกำหนดที่ flex container
- ถ้าไม่มีพื้นที่ว่างเหลือ ผลของ justify-content จะมองเห็นได้น้อยมาก