💡 Flexbox 佈局：彈性與響應式設計

Flexbox (Flexible Box Layout) 是一種一維佈局方法，它能讓您輕鬆、高效地在容器內排列、對齊和分配項目空間。它是實現響應式設計的強大工具。

1. 核心概念：容器與項目

Flexbox 基於兩大要素：

Flex 容器 (Container)

透過設定 `display: flex;` 建立。所有佈局屬性（如對齊方式）都應用在容器上。

.container {
  display: flex;
}

Flex 項目 (Items)

容器內的子元素。它們的尺寸和順序可以通過 Flex 項目屬性（如 `flex-grow`）來控制。

.item {
  flex-grow: 1; /* 允許項目佔據額外空間 */
}

2. 掌握兩大主軸：主軸與交叉軸

軸線	CSS 屬性	用途描述
主軸 (Main Axis)	`justify-content`	控制項目沿著主軸（預設橫向）的排列與間距。
交叉軸 (Cross Axis)	`align-items`	控制項目沿著交叉軸（預設縱向）的對齊方式。

3. 實戰範例：響應式導覽列

以下範例展示了如何使用 Flexbox 建立一個導覽列：在手機上堆疊 (Column)，在桌面上橫向分佈 (Row)。

**操作提示：** 請嘗試縮放瀏覽器寬度 (特別是當寬度超過 768px 時)，觀察 Box 排列從**垂直堆疊**轉變為**水平分佈**的變化。

導覽項目 A

導覽項目 B

導覽項目 C

範例使用的 CSS/Media Query 關鍵點

/* 容器設定 (Container) */
.flex-container-example {
  display: flex;
  flex-direction: column; /* 👈 小螢幕：垂直堆疊 (響應式基礎) */
}

/* 桌面斷點 (Min-width: 768px) */
@media (min-width: 768px) {
  .flex-container-example {
    flex-direction: row; /* 👈 大螢幕：橫向排列 */
    justify-content: space-between; 
  }
  .flex-item {
    flex: 1; /* 👈 讓每個項目佔用相等的可用空間 (彈性化) */
  }
}