Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

flex-shrink CSS プロパティは、flex アイテムの flex shrink factor を指定します。

初期値1
適用対象flex items, including in-flow pseudo-elements
継承不可
メディアvisual
計算値指定値
アニメーションの可否可。 の値として補完しますnumber
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

flex-shrink: 2;
flex-shrink: 0.6;

/* グローバル値 */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

<number>
<number> をご覧ください。負の値は無効です。

形式構文

<number>

element { 
  flex-shrink: 3;
}

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module
flex-shrink の定義
勧告候補 最初の定義

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 18.0 (18.0) (要設定) [1]
32.0 (32.0) [2]
21.0-webkit 10 [3] 12.10 8.0-webkit
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート 18.0 (18.0) (要設定) [1]
32.0 (32.0) [2]
? 未サポート 12.10 未サポート

[1] バージョン 28 まで、Firefox は単一ラインの flexbox のみサポートしていました。Firefox 18 および 19 で flexbox サポートを有効にするには、about:config の設定 "layout.css.flexbox.enabled" を true に変更します。

[2] Firefox 32 より前のバージョンでは、Gecko は値 0 から始まる、または値 0 で終わるアニメーションを実行できませんでした (仕様デモ)。

[3] Internet Explorer 10 は、flex-shrink の初期値が 1 ではなく 0 です。回避策は、flex-shrink の値を常に明示することです。詳しくは Flexbug #6 をご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz, yyss, fscholz, teoli, ethertank
 最終更新者: Sebastianz,