We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

初期値1
適用対象flex items, including in-flow pseudo-elements
継承不可
メディアvisual
計算値指定値
Animation typenumber
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については 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 の定義
勧告候補 最初の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,