CSS 的 Flexbox 及 Grid 的使用情境及主要區別？

1. Flexbox 和 Grid 的簡介

Flexbox（彈性盒模型，Flexible Box Layout）：
- Flexbox 是一維佈局模型，主要用來處理單一行或單一列的元素排列。
- 它擅長在一個方向（水平或垂直）上靈活分配空間、對齊元素，適合用於元件內部的佈局或簡單的頁面結構。
- 核心概念：容器（flex container）和子元素（flex items），透過屬性控制對齊、間距和順序。
Grid（網格佈局，CSS Grid Layout）：
- Grid 是二維佈局模型，同時處理行和列，適合用來建立複雜的網頁佈局。
- 它允許你定義網格結構（行數、列數、間距），並精確控制元素在網格中的位置。
- 核心概念：網格容器（grid container）和網格項目（grid items），透過行/列的定義來組織內容。

2. 使用情境

以下是 Flexbox 和 Grid 的常見使用情境，幫助你判斷何時使用哪個工具：

Flexbox 的使用情境

元件內部的佈局：
- 例如導航欄、按鈕列、卡片內的內容排列。
- 適合需要元素水平或垂直對齊，或自動調整大小的場景。
動態調整空間：
- Flexbox 可以根據內容大小自動分配空間，例如讓多個元素均分容器寬度。
- 適合處理未知數量或尺寸的子元素。
簡單的響應式設計：
- 透過 flex-wrap 屬性，Flexbox 可以輕鬆實現元素換行，適應不同螢幕尺寸。
對齊和間距控制：
- 例如讓元素居中（水平+垂直）、靠左、靠右，或均勻分佈。

範例情境：打造一個水平導航欄，元素間距均勻，且在小螢幕時自動換行。

Grid 的使用情境

複雜的網頁佈局：
- 例如建立包含頁首、側邊欄、主內容、頁尾的網頁結構。
- 適合需要同時控制行和列的場景。
精確的網格定位：
- Grid 允許你指定元素在特定行/列的位置，適合需要固定網格結構的設計。
響應式網頁設計：
- 透過 grid-template-areas 或媒體查詢，可以輕鬆調整網格佈局，適應不同螢幕尺寸。
重疊元素：
- Grid 可以讓元素在網格中重疊，適合創意設計。

範例情境：設計一個包含側邊欄和主內容的網頁，側邊欄固定寬度，主內容自適應剩餘空間。

3. 主要區別

以下是 Flexbox 和 Grid 的核心差異，幫助你快速判斷何時選擇哪個：

特性	Flexbox	Grid
佈局維度	一維（行或列）	二維（行和列）
主要用途	元件內部佈局、簡單對齊、空間分配	複雜網頁佈局、精確定位
控制靈活性	擅長動態分配空間，子元素大小靈活調整	精確定義行/列大小和位置
對齊方式	提供靈活的對齊（justify-content、align-items）	提供更精細的對齊和網格線控制
複雜度	簡單，適合快速佈局	功能強大，適合複雜結構，但學習曲線稍高
響應式設計	透過 flex-wrap 實現簡單換行	透過 grid-template-areas 或媒體查詢實現複雜佈局
瀏覽器支援	廣泛支援（包括舊瀏覽器）	廣泛支援，但部分舊瀏覽器功能有限

4. 程式碼範例

為了讓你更容易理解和操作，我會提供兩個完整的範例，分別展示 Flexbox 和 Grid 的應用，並解釋每個步驟。

範例 1：使用 Flexbox 打造水平導航欄

情境：設計一個導航欄，包含 4 個按鈕，水平排列，間距均勻，螢幕縮小時自動換行。

步驟：

建立 HTML 結構，包含一個容器和多個按鈕。
將容器設置為 Flexbox，啟用 flex-wrap 實現響應式換行。
使用 justify-content 控制水平間距，align-items 控制垂直對齊。

程式碼：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 導航欄</title>
  <style>
    /* 設置導航欄容器 */
    .nav-container {
      display: flex; /* 啟用 Flexbox */
      justify-content: space-between; /* 子元素間距均勻分佈 */
      align-items: center; /* 垂直居中 */
      flex-wrap: wrap; /* 允許換行 */
      background-color: #f0f0f0;
      padding: 10px;
    }

    /* 設置按鈕樣式 */
    .nav-item {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      margin: 5px;
      border-radius: 5px;
      text-align: center;
    }
  </style>
</head>
<body>
  <nav class="nav-container">
    <div class="nav-item">首頁</div>
    <div class="nav-item">關於</div>
    <div class="nav-item">服務</div>
    <div class="nav-item">聯繫</div>
  </nav>
</body>
</html>

說明：

display: flex：將 .nav-container 設置為 Flexbox 容器。
justify-content: space-between：讓按鈕均勻分佈在容器中。
flex-wrap: wrap：當螢幕寬度不足時，按鈕會自動換行。
align-items: center：確保按鈕垂直居中。

操作提示：你可以將瀏覽器視窗縮小，觀察按鈕如何自動換行，體驗 Flexbox 的響應式特性。

範例 2：使用 Grid 打造網頁佈局

情境：設計一個網頁，包含頁首（header）、側邊欄（sidebar）、主內容（main）和頁尾（footer），並在小螢幕時重新排列。

步驟：

建立 HTML 結構，包含頁首、側邊欄、主內容和頁尾。
將容器設置為 Grid，定義行和列的結構。
使用 grid-template-areas 明確指定每個區域的位置。
加入媒體查詢，調整小螢幕的佈局。

程式碼：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid 網頁佈局</title>
  <style>
    /* 設置網格容器 */
    .grid-container {
      display: grid; /* 啟用 Grid */
      grid-template-columns: 200px 1fr; /* 側邊欄固定 200px，主內容佔剩餘空間 */
      grid-template-rows: 100px 1fr 100px; /* 頁首 100px，主內容自適應，頁尾 100px */
      grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer"; /* 定義網格區域 */
      height: 100vh; /* 容器高度為視窗高度 */
      gap: 10px; /* 網格間距 */
    }

    /* 設置各區域樣式 */
    .header {
      grid-area: header;
      background-color: #007bff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: #28a745;
      color: white;
      padding: 10px;
    }

    .main {
      grid-area: main;
      background-color: #f8f9fa;
      padding: 10px;
    }

    .footer {
      grid-area: footer;
      background-color: #6c757d;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 響應式設計：螢幕小於 768px 時，改為單列佈局 */
    @media (max-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr; /* 單列 */
        grid-template-rows: 100px 200px 1fr 100px; /* 調整行高 */
        grid-template-areas: 
          "header"
          "sidebar"
          "main"
          "footer";
      }
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <header class="header">頁首</header>
    <aside class="sidebar">側邊欄</aside>
    <main class="main">主內容</main>
    <footer class="footer">頁尾</footer>
  </div>
</body>
</html>

說明：

display: grid：將 .grid-container 設置為 Grid 容器。
grid-template-columns 和 grid-template-rows：定義網格的列和行結構。
grid-template-areas：明確指定每個區域的位置，方便閱讀和維護。
gap: 10px：設置網格間距。
媒體查詢（@media）：在小螢幕（寬度小於 768px）時，將佈局改為單列。

操作提示：你可以調整瀏覽器視窗大小，觀察網格如何從兩列（側邊欄+主內容）變為單列佈局。

5. 何時選擇 Flexbox 或 Grid？

選擇 Flexbox：
- 當你只需要在**單一方向（行或列）**上排列元素。
- 當子元素的數量或大小不確定，需要動態分配空間。
- 當你需要快速實現居中對齊或簡單的響應式佈局。
- 範例：導航欄、卡片列表、表單按鈕排列。
選擇 Grid：
- 當你需要建立複雜的二維佈局，例如網頁的整體結構。
- 當你需要精確控制元素的行和列位置。
- 當你需要實現網格線對齊或區域命名來簡化佈局管理。
- 範例：網頁主結構、圖片庫、儀表板。

建議：在實務中，Flexbox 和 Grid 經常搭配使用。例如，使用 Grid 設計頁面整體佈局，然後在每個網格區域內使用 Flexbox 處理元件的內部對齊。

1. Flexbox 和 Grid 的簡介​

2. 使用情境​

Flexbox 的使用情境​

Grid 的使用情境​

3. 主要區別​

4. 程式碼範例​

範例 1：使用 Flexbox 打造水平導航欄​

範例 2：使用 Grid 打造網頁佈局​

5. 何時選擇 Flexbox 或 Grid？​