HTML PPT 3(C) - CSS 版面設計 | Flexbox 與響應式設計

課程目標

掌握 CSS 盒模型（Box Model）與 Flexbox 的概念
能設計多卡片、整齊排列的版面
開始理解排版與響應式設計 (Responsive Design)

本課是 Bootstrap 前的重要過渡練習。學會這些，你會更容易理解 Bootstrap 的 Grid System！

Step 1：建立基本 HTML 結構

這是你的 HTML 基礎骨架：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 版面設計入門</title>
</head>
<body>
  <h1>我的第一個 FLEXBOX CSS 排版練習</h1>
</body>
</html>

✅ TIP：確認頁面可打開，看到單純的標題。

Step 2：加入 CSS 設定基本樣式

我們先加上 <style> 標籤，設定顏色與版面基準：

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f5f5f5;
}
h1 {
  text-align: center;
  color: #333;
  padding-top: 20px;
}
</style>

示例效果：
背景變灰，標題置中。

Step 3：加入容器與卡片 (Container & Cards)

我們來增強版面，建立一個「容器 container」裡放三張「卡片 card」。每張卡片有圖片、標題與文字。

<div class="container">
  <div class="card">
    <img src="https://via.placeholder.com/250x150" alt="Sample 1">
    <h3>商品 A</h3>
    <p>這是一個商品的簡單介紹。</p>
  </div>

  <div class="card">
    <img src="https://via.placeholder.com/250x150" alt="Sample 2">
    <h3>商品 B</h3>
    <p>這是一個商品的簡單介紹。</p>
  </div>

  <div class="card">
    <img src="https://via.placeholder.com/250x150" alt="Sample 3">
    <h3>商品 C</h3>
    <p>這是一個商品的簡單介紹。</p>
  </div>
</div>

Step 4：加上卡片樣式與陰影（Box Model）

為每張卡片設計外框、間距與陰影：

.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  margin: 10px;
  width: 250px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}
.card img {
  width: 100%;
  border-radius: 6px;
}

✅ 當前重點：盒模型 (Box Model) 的核心屬性包括 margin、padding、border。

Step 5：讓卡片排列整齊 (Flexbox)

使用 display: flex 讓卡片水平排列、並在空間不足時自動換行。

.container {
  display: flex;
  justify-content: center; /* 水平置中 */
  align-items: flex-start;  /* 垂直對齊上方 */
  flex-wrap: wrap;          /* 超出寬度時自動換行 */
  gap: 10px;                /* 卡片之間的間距 */
}

示例效果：
多張卡片橫向排列，並在窄視窗（手機）時自動換行。

Step 6：加上響應式效果 (Media Query)

最後，我們讓版面在手機上自動調整寬度與背景色：

@media (max-width: 600px) {
  body { background-color: #eef; }
  .card { width: 90%; }
}

📱 嘗試縮小視窗！背景變色、卡片佔滿畫面。

Step 7：完整範例預覽

整合上面所有程式碼，完成一個美觀、響應式的卡片排版頁：

查看完成版（Exercise 3-3）

完成版

對應完成練習

這個較早期的完成版頁面對應本頁的 CSS 版面與 Flexbox 練習。

Exercise 3-3 CSS Layout 打開完成練習總覽

🎉 恭喜完成！

你現已學會 CSS 排版與 Flexbox 原理。下堂課將學習如何用 Bootstrap 來自動簡化這些布局。