flex-shrink

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

flex-shrink CSS 屬性設定彈性專案的收縮因子。如果所有彈性專案的大小總和大於彈性容器，那麼彈性專案會根據其 flex-shrink 值進行收縮以適應容器。每條彈性線的負自由空間會分配給該線中 flex-shrink 值大於 0 的彈性專案。

注意：建議使用帶有關鍵字值（如 auto 或 initial）的 flex 簡寫屬性，而不是單獨設定 flex-basis。關鍵字值會擴充套件為 flex-grow、flex-shrink 和 flex-basis 的可靠組合，這有助於實現通常期望的彈性行為。

試一試

flex-shrink: 0;

flex-shrink: 1;

flex-shrink: 2;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">I shrink</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 300px;
}

語法

css

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: revert;
flex-shrink: revert-layer;
flex-shrink: unset;

描述

flex-shrink 屬性指定彈性收縮因子，它決定了當負自由空間被分配時，彈性專案相對於彈性容器中其他彈性專案收縮的程度。

此屬性處理瀏覽器計算彈性專案的 flex-basis 值，並發現它們太大以至於無法放入彈性容器的情況。只要 flex-shrink 具有正值，專案就會收縮，以便它們不會溢位容器。

flex-grow 屬性根據每個專案的彈性增長因子（僅考慮 flex-grow 屬性的值）來分配可用的正自由空間。flex-shrink 屬性管理移除負自由空間，使盒子適應其容器而不會溢位。移除空間比新增空間稍微複雜一些。彈性收縮因子乘以彈性基準大小；這會根據專案可以收縮的程度按比例分配負空間。這可以防止較小的專案在較大的專案明顯減少之前收縮到 0px。

通常，flex-shrink 與 flex-grow 和 flex-basis 屬性一起使用。在 flex 簡寫屬性中，收縮因子始終是第二個 <number>。如果簡寫屬性只包含一個數值，則該值被假定為 flex-grow 值。

值

flex-shrink 屬性被指定為單個 <number>。

<number>: 參見 <number>。負值無效。預設為 1。

正式定義

初始值	`1`
應用於	彈性專案，包括在流中的偽元素
繼承性	否
計算值	同指定值
動畫型別	一個 number

正式語法

flex-shrink = 
  <number [0,∞]>

示例

設定彈性專案收縮因子

此示例演示了負自由空間如何根據專案的收縮因子進行分配。它包括五個 flex-shrink 值大於 0 的彈性專案，它們的總寬度大於其父彈性容器的寬度。

HTML

html

<div id="content">
  <div class="box1">A</div>
  <div class="box2">B</div>
  <div class="box3">C</div>
  <div class="box4">D</div>
  <div class="box5">E</div>
</div>

CSS

我們給每個彈性專案一個 200px 的width。由於 flex-basis 屬性預設為 auto，因此每個專案的 flex-basis 都是 200px。這使得彈性專案的總寬度為 1000px，是容器的兩倍。我們將所有彈性專案設定為可收縮，flex-shrink 值大於 0。最後兩個專案設定了更大的 flex-shrink 值，因此它們會收縮更多。

css

#content {
  display: flex;
  width: 500px;
}

#content div {
  width: 200px;
}

.box1,
.box2,
.box3 {
  flex-shrink: 1;
}

.box4 {
  flex-shrink: 1.5;
}

.box5 {
  flex-shrink: 2;
}

#content {
  margin: 5px;
}
div {
  font-family: monospace;
  outline: 1px solid;
  line-height: 4em;
  text-align: center;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: lightblue;
}
.box3 {
  background-color: yellow;
}
.box4 {
  background-color: lightsalmon;
}
.box5 {
  background-color: lightgreen;
}

結果

彈性專案不會溢位容器，因為它們能夠收縮：500px 的負自由空間根據它們的 flex-shrink 值分配給這五個專案。前三個專案設定了 flex-shrink: 1。D 設定了 flex-shrink: 1.5，E 設定了 flex-shrink: 2。D 和 E 的最終寬度小於其他專案，其中 E 小於 D。

規範

規範
CSS 彈性盒子佈局模組第 1 級 # flex-shrink-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題