หัวข้อ 3: Layout ด้วย Flexbox และ CSS Grid

แนวคิดหลัก

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

Flexbox

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

.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

.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 แบบแถวและคอลัมน์

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

Grid Span และ Responsive Grid

.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

.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

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

ตัวอย่าง Holy Grail Layout

.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 ประกอบด้วยส่วนใดบ้าง

กลับสัปดาห์ที่ 3