Flexbox — Layout หนึ่งมิติ

ถ้าคุณเคยใช้ Auto Layout ใน Figma คุณเข้าใจ Flexbox แล้ว ทั้งสองทำงานบนแนวคิดเดียวกันพอดี: container พ่อแม่ควบคุมวิธีการจัดเรียง children ตามแกนเดียว คุณตั้งกฎบน parent และ children ก็ทำตาม

ความแตกต่างเดียวคือ syntax มาดูการแมปจากสิ่งที่คุณรู้แล้วไปยังชื่อที่ CSS ใช้เรียก

การแปล Figma → CSS

การตั้งค่า Figma Auto Layout	CSS Flexbox property
Direction: Horizontal	`flex-direction: row` (ค่าเริ่มต้น)
Direction: Vertical	`flex-direction: column`
Alignment: Left/Top	`justify-content: flex-start`
Alignment: Center	`justify-content: center`
Alignment: Right/Bottom	`justify-content: flex-end`
Alignment: Space between	`justify-content: space-between`
Cross-axis alignment: Center	`align-items: center`
Gap (ระยะห่างระหว่างไอเทม)	`gap: 1rem`
Wrap items	`flex-wrap: wrap`

Properties ที่สำคัญ

display: flex — เปิดใช้งาน Flexbox บน parent ไม่มีอะไรเปลี่ยนจนกว่าคุณจะเพิ่มบรรทัดนี้

flex-direction — children ไหลไปทิศทางไหน?

row — ซ้ายไปขวา (ค่าเริ่มต้น)
column — บนลงล่าง

justify-content — children กระจายตัวอย่างไรตาม main axis (ทิศทางที่ children ไหลไป)?

flex-start / flex-end / center / space-between / space-around / space-evenly

align-items — children จัดแนวอย่างไรบน cross axis (ตั้งฉากกับการไหล)?

flex-start / flex-end / center / stretch

gap — ระยะห่างที่สม่ำเสมอระหว่างไอเทม ไม่ต้องใช้ margin tricks อีกต่อไป นี่คือเดียวกับค่า gap ใน Figma Auto Layout

flex-wrap — ไอเทมควร wrap ไปบรรทัดถัดไปเมื่อไม่มีพื้นที่เพียงพอหรือไม่?

nowrap (ค่าเริ่มต้น ไอเทมหดตัวให้พอดี) / wrap (ไอเทม wrap ไปแถวใหม่)

ด้านล่างคือ navigation bar กับลิงก์สามอัน ลองเปลี่ยน properties ในแผง CSS เพื่อดูว่า Flexbox ตอบสนองอย่างไร

<nav class="nav">
  <span class="logo">MyBrand</span>
  <div class="links">
    <a class="link" href="#">Home</a>
    <a class="link" href="#">Work</a>
    <a class="link" href="#">About</a>
    <a class="link" href="#">Contact</a>
  </div>
</nav>
<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

สิ่งที่ลองได้:

เปลี่ยน justify-content ของ .cards เป็น center หรือ space-between
เปลี่ยน flex-direction ของ .cards เป็น column
เพิ่ม align-items: center ให้ .nav (มีอยู่แล้ว — ลองลบออก)
เปลี่ยน gap ของ .cards เป็น 0.25rem หรือ 3rem

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ลืมตั้ง flex-wrap ทำให้ layout overflow บนจอเล็ก
ใช้ margin แทน gap ทำให้ระยะห่างไม่สม่ำเสมอตอน item ถูกเพิ่มหรือลบ
สลับสับสนระหว่าง main axis กับ cross axis เวลาเปลี่ยน flex-direction

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “Auto Layout เหมือนใน Figma” แต่ developer ต้องแปลทุก setting (direction, gap, alignment) เป็น property คนละตัวและเทสต์ที่ content length ต่างกันด้วย

💡 ตัวอย่างจากของจริง

Linear ใช้ Flexbox แทบทุกจุดของ UI (sidebar, list items) เพราะ Auto Layout แบบ Figma แปลงเป็น Flexbox ได้ตรงที่สุด