flex-shrink: 0 是 CSS Flexbox 布局中的一個關鍵屬性，用于禁止彈性項目（flex item）在容器空間不足時被壓縮。以下是詳細解釋和示例：

---

核心作用

當容器的可用空間小于所有彈性項目的總寬度（或高度）時：

• 默認行為（flex-shrink: 1）：項目會按比例縮小以適應容器。
• flex-shrink: 0：項目會保持原始大小，拒絕被壓縮，可能導致溢出或換行。

---

示例場景

假設容器寬度為 500px，包含三個項目，每個項目初始寬度為 200px：

.container {display: flex;width: 500px;
}
.item {width: 200px;
}

默認行為（flex-shrink: 1）

所有項目會按比例縮小，總寬度適配容器：

.item {flex-shrink: 1; /* 默認值 */
}

• 每個項目實際寬度：500px / 3 ≈ 166.67px

禁止壓縮（flex-shrink: 0）

若第二個項目設置 flex-shrink: 0：

.item:nth-child(2) {flex-shrink: 0;
}

• 第二個項目保持 200px，其他兩個項目按比例分配剩余空間：
  • 剩余空間：500px - 200px = 300px
  • 其他兩個項目各占 150px（300px / 2）

---

對比其他屬性

• flex-grow：控制項目在容器空間充足時的擴展行為。
• flex-basis：定義項目的初始大小（類似 width/height）。
• 簡寫屬性：flex: 0 0 auto 等價于 flex-shrink: 0 + 不擴展 + 初始大小為 auto。

---

典型應用場景

1. 固定關鍵元素：如導航欄中的 Logo 或按鈕，防止被壓縮變形。
2. 響應式布局：在移動端保持某些元素（如側邊欄）的最小寬度。
3. 表單布局：確保輸入框標簽不因空間不足而擠壓。

---

注意事項

• 溢出風險：若多個項目同時設置 flex-shrink: 0，可能導致內容溢出容器。
• 換行影響：若容器啟用 flex-wrap: wrap，溢出項目會自動換行，而非壓縮。

---

通過合理使用 flex-shrink: 0，可以更精準地控制 Flexbox 布局的響應式行為，確保關鍵元素在空間不足時保持穩定。