探索 CSS flex-shrink 屬性：控制元素縮小的比例
更新日期： 2024 年 11 月 4 日
在 CSS Flexbox 佈局系統中，flex-shrink 是一個重要的屬性，專門用來控制元素在空間不足時縮小的比例。
透過 flex-shrink，我們可以細緻地調整不同元素在容器內的縮小方式，確保排版不會被擠壓變形。
本文將詳細介紹 flex-shrink 的作用及其工作原理，並搭配範例來說明如何靈活使用這個屬性。
flex-shrink 屬性介紹
flex-shrink 定義了當父容器寬度不足時，子元素（flex item）應該縮小的程度。
這個屬性使用一個非負數值來控制縮小比例，數值越大，元素被壓縮的程度就越高；反之，數值越小，元素則越不容易縮小。
預設值為 1，表示元素會根據容器內部空間不足的比例適當縮小。
基本語法
flex-shrink 的語法非常簡單，只需設定一個非負數即可：
flex-shrink: <number>;其中 <number> 代表縮小比例，0 表示不允許縮小，任何大於 0 的值表示元素可以根據空間不足的程度進行縮小。這個屬性適用於在容器內的彈性元素。
flex-shrink 的工作原理
當容器的寬度不足以容納所有子元素的原始大小時，Flexbox 會根據每個子元素的 flex-shrink 值來分配縮小的比例。
元素之間的縮小比例，由其 flex-shrink 值相對於其他元素的 flex-shrink 值來決定。
舉例來說，假設一個容器內有三個子元素，並設定如下：
.container {
display: flex;
}
.item1 {
flex-shrink: 1;
}
.item2 {
flex-shrink: 2;
}
.item3 {
flex-shrink: 1;
}當容器寬度不足時，item2 會縮小兩倍於 item1 和 item3 的比例。因此，在有限空間下，item2 將會壓縮得更厲害，而 item1 和 item3 則以相同的比例縮小。
使用範例
例子 1：設定基本縮小比例
假設我們有一個容器，裡面包含三個不同寬度的子元素，我們希望各個元素能夠依照不同的比例進行縮小：
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>.container {
display: flex;
width: 400px;
}
.item1 {
flex-shrink: 1;
width: 200px;
}
.item2 {
flex-shrink: 2;
width: 200px;
}
.item3 {
flex-shrink: 3;
width: 200px;
}在此範例中，每個子元素初始寬度都是 200px，而容器寬度僅為 400px。
當空間不足時，item3 的 flex-shrink 值最大，會縮小得最多；item2 則縮小兩倍於 item1 的程度，達到依比例縮小的效果。
例子 2：防止特定元素縮小
有時，我們希望某些元素在容器內始終保持固定寬度，而其他元素則可以隨容器空間的減少而縮小。
在這種情況下，可以將特定元素的 flex-shrink 設為 0，防止其縮小：
<div class="container">
<div class="item item1">固定寬度</div>
<div class="item item2">可縮小元素</div>
</div>.container {
display: flex;
width: 300px;
}
.item1 {
flex-shrink: 0;
width: 150px;
}
.item2 {
flex-shrink: 1;
width: 200px;
}在此範例中，item1 的 flex-shrink 設為 0，因此無論容器寬度如何變化，item1 都會維持 150px 的寬度。item2 則設為 flex-shrink: 1，在容器空間不足時將根據剩餘空間進行縮小。
flex-shrink 的使用注意事項
flex-shrink和flex-grow搭配使用：flex-shrink控制的是縮小比例，而flex-grow控制的是擴展比例。兩者常搭配使用，以更靈活地管理元素在容器內的大小變化。- 配合
flex-basis使用：flex-basis定義了元素的初始尺寸。若將flex-basis設為auto，則元素會先根據內容決定尺寸，再應用flex-shrink進行縮小。 - 避免設置過大的縮小比例：過大的
flex-shrink值可能導致元素被壓縮至無法辨識的狀態，建議根據需求適當設置縮小比例，以維持排版的可讀性。
結論
flex-shrink 是一個有助於控制元素縮小行為的重要屬性。
在空間不足的情況下，透過設定 flex-shrink，我們可以靈活分配子元素的縮小比例，確保頁面布局，在不同螢幕尺寸下依然保持整齊與美觀。
掌握 flex-shrink，可以讓我們在處理彈性佈局時，對於空間的縮放和元素的大小有更高的掌控力。