CSS 参考書

CSS @ルール(RULES)

CSS 属性完全解説

CSS3 flex-shrink 属性の使用方法及び例

flex-shrink CSS属性は、flexアイテムがflexコンテナ内の他のアイテムに対してどのように縮小するかを指定します。

以下のテーブルは、この属性の使用方法とバージョンハイストリと、javascriptスクリプト内でのこの属性の使用構文を示しています。

デフォルト値：	1
適用：	エラストイコス要素
継承：	ありません
アニメーション可能：	は。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object.style.flexShrink="5"

flex-shrinkの使用構文

この属性の構文は以下の通りです：

flex-shrink:　number　|　initial　|　inherit

以下の例では、flexを使用する方法を示しています。-shrink属性。

例

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-shrink:　1;　/*　Safari　6。1+　*/
　　　　flex-shrink:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-shrink:　3;　/*　Safari　6。1+　*/
　　　　flex-shrink:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-shrink:　5;　/*　Safari　6。1+　*/
　　　　flex-shrink:　5;
}

テストして見て‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
number	正の数値で、flexを決定するために使用されます。-shrinkのエラストイコスの係数。デフォルト値は1。-数値は無効です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のflexを使用します。-shrinkの属性値。

ブラウザの互換性

flex-shrink属性のブラウザの互換性、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox18+ ^-moz-、28+ Google Chrome 21+ ^-webkit-、29+ Internet Explorer 11+ Apple Safari 6。1+ ^-webkit- Opera 12。1+

さらに詳しく

以下のチュートリアルを参照してください：CSS3多列レイアウト。

CSS3 flex-wrap 属性 CSS3 flex-grow 属性