CSS flex-shrink 屬性

定義和用法

flex-shrink 屬性固定在相同的容器中,項目相對于其余彈性項目的收縮量。

注釋:如果元素不是彈性項目,則 flex 屬性無效。

另請參閱:

CSS 教程: CSS 彈性框

CSS 參考手冊:flex 屬性

CSS 參考手冊:flex-basis 屬性

CSS 參考手冊:flex-direction 屬性

CSS 參考手冊:flex-flow 屬性

CSS 參考手冊:flex-grow 屬性

CSS 參考手冊:flex-wrap 屬性

HTML DOM 參考手冊:flexShrink 屬性

實例

使第二個彈性項目相比其余項目收縮三倍:

div:nth-of-type(2) {
  flex-shrink: 3;
}

親自試一試

CSS 語法

flex-shrink: number|initial|inherit;

屬性值

描述
number 數字,規定項目相對于其余彈性項目的收縮量。默認值為 1。
initial 將此屬性設置為其默認值。參閱 initial
inherit 從其父元素繼承此屬性。參閱 inherit

技術細節

默認值: 1
繼承:
動畫制作: 支持。請參閱:動畫相關屬性
版本: CSS3
JavaScript 語法: object.style.flexShrink="5"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit- 或 -moz- 的數字表示使用前綴的首個版本。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0