Flexbox

1. Core Idea

gap สร้างช่องว่างระหว่าง flex items จากฝั่ง container จึงไม่ต้องใส่ margin ให้ item แต่ละตัว และไม่เกิดช่องว่างเกินที่ขอบแถว

• gap: 12px หมายถึงช่องว่างทุกทิศระหว่าง items เป็น 12px
• gap: 8px 16px หมายถึง row-gap 8px และ column-gap 16px
• เมื่อใช้ flex-wrap, gap จะดูแลช่องว่างระหว่างแถวด้วย

2. Mental Model

margin เหมือนติดสติกเกอร์เว้นระยะไว้ที่ของแต่ละชิ้น ส่วน gap เหมือนตั้งเครื่องแบ่งระยะบนถาดกลาง ทำให้ระยะระหว่างของเท่ากันและไม่ติดเกินตรงขอบถาด

gap สร้างช่องว่างระหว่าง items โดยควบคุมจาก container

3. Rule / Definition

4. Code Example

5. Recap

• gap กำหนดที่ flex container
• gap สร้างช่องว่างระหว่าง items ไม่ใช่รอบนอกของ container
• หลังเรียน flex-wrap แล้ว gap ช่วยจัดระยะทั้งระหว่างคอลัมน์และแถวได้

Lab 1: เพิ่มช่องว่างให้ toolbar

Lab 2: จัด tag หลายแถวให้มีระยะเท่ากัน