概要
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 をご覧ください。