** Flexbox 概念複習**

• Flex 容器 (Flex Container)：包含 flexbox 元素的父容器，使用 display: flex; 定義。
• Flex 項目 (Flex Items)：直接子元素，會根據 flexbox 佈局的規則排列。

Flexbox 進階屬性

• align-content：多行項目時，用於控制交叉軸上行與行之間的間距。

  • 常用值：
    • flex-start、flex-end、center、space-between、space-around、stretch

• flex-wrap：控制項目是否在容器內換行。

  • 常用值：
    • nowrap：不換行（默認）。
    • wrap：項目會換行。

• align-self：單獨控制某一項目的對齊方式，覆蓋 align-items 設定。

• flex-grow：設定項目如何分配剩餘空間，默認為 0，不分配剩餘空間。

• flex-shrink：設定項目在容器空間不足時的縮小比例，默認為 1。

• flex-basis：設定項目的基礎大小，類似於設定 width 或 height。

有關Flexbox的基本屬性，可以去看前面的文章!

常見 Flexbox 佈局範例

水平垂直居中佈局

• 實現方式：

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 確保容器填滿視窗 */
  }
  

雙欄佈局

• 實現方式：

  .container {
    display: flex;
  }
  
  .sidebar {
    flex: 1; /* 側邊欄佔據 1 倍空間 */
  }
  
  .content {
    flex: 3; /* 內容區域佔據 3 倍空間 */
  }
  

多行佈局

• 實現方式：

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .item {
    flex-basis: 30%; /* 每個項目佔據 30% 寬度 */
    margin: 1%;
  }
  

Flexbox 排錯建議

• 檢查是否有設定 display: flex;。
• 確保 flex-direction 和 justify-content 設定正確。
• 使用開發者工具中的「Flexbox」視圖來排查佈局問題。