reveal.js

# Layout ด้วย Flexbox และ CSS Grid

หัวข้อ 3 · CSS แผ่นแบบต่อเรียงและการออกแบบเว็บ

---

## แนวคิดหลัก

Flexbox และ CSS Grid เป็นเครื่องมือหลักสำหรับจัด layout สมัยใหม่ Flexbox เหมาะกับการจัดเรียงแบบหนึ่งมิติ เช่น แถวหรือคอลัมน์ ส่วน Grid เหมาะกับ layout สองมิติที่มีทั้งแถวและคอลัมน์

---

## Flexbox

เริ่มใช้ Flexbox ด้วย `display: flex`

```css
.toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
```

property สำคัญ:

1. `flex-direction`: ทิศทาง เช่น `row`, `column`
2. `justify-content`: จัดแนวตามแกนหลัก
3. `align-items`: จัดแนวตามแกนรอง
4. `gap`: ระยะห่างระหว่าง item

---

## Flex Wrap และขนาดของ item

```css
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex: 1 1 160px;
}
```

ค่าที่เกี่ยวข้อง:

1. `flex-wrap`: อนุญาตให้ขึ้นบรรทัดใหม่
2. `flex-grow`: ขยายได้มากแค่ไหน
3. `flex-shrink`: หดได้มากแค่ไหน
4. `flex-basis`: ขนาดตั้งต้น

---

## CSS Grid

Grid ใช้จัด layout แบบแถวและคอลัมน์

```css
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 16px;
}
```

---

## Grid Span และ Responsive Grid

```css
.featured {
  grid-column: span 2;
}

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
```

คำสำคัญ:

1. `grid-column`
2. `grid-row`
3. `span`
4. `auto-fill`
5. `auto-fit`
6. `minmax()`

---

## `grid-area`

ใช้ตั้งชื่อพื้นที่ใน layout

```css
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: 240px 1fr;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }
```

---

## เลือก Flexbox หรือ Grid

| สถานการณ์ | เครื่องมือที่เหมาะ |
|---|---|
| ปุ่มใน toolbar | Flexbox |
| จัดเมนูแนวนอน | Flexbox |
| card responsive หลายคอลัมน์ | Grid |
| layout ทั้งหน้า | Grid |
| จัด item ตรงกลาง | Flexbox |
| layout มีแถวและคอลัมน์ชัดเจน | Grid |

---

## ตัวอย่าง Card Grid

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
```

---

## ตัวอย่าง Holy Grail Layout

```css
.layout {
  display: grid;
  min-height: 100vh;
  grid-template:
    "header header header" auto
    "nav main aside" 1fr
    "footer footer footer" auto
    / 220px 1fr 260px;
}
```

---

## กิจกรรม

สร้างหน้า layout ที่มี header, nav, main, aside และ footer โดยใช้ CSS Grid แล้วใช้ Flexbox จัดเรียงปุ่มใน nav

---

## แบบทดสอบหลังเรียน

1. Flexbox เหมาะกับ layout แบบใด
2. Grid เหมาะกับ layout แบบใด
3. `justify-content` และ `align-items` ต่างกันอย่างไร
4. `minmax(220px, 1fr)` ช่วย responsive อย่างไร
5. Holy Grail Layout ประกอบด้วยส่วนใดบ้าง

---

## จบบทเรียน

<a href="/web-programming/03-css-design/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>