Flexアイテムの萎縮率

主軸方向のFlexアイテムの超過しているFlexコンテナーの幅から分割して、Flexアイテムへ割り振るには、flex-shrinkプロパティを使用します。

例えば、1つ目のFlexアイテムに対してflex-shrinkを0、2つ目のFlexアイテムに対してflex-shrinkを2に設定した場合は、超過している幅をflex-shrinkの値を合計した分等幅で分割し、2つ目のFlexアイテムには分割した2つ分の幅、3つ目のFlexアイテムには分割した1つ分の幅が縮小されます。

Internet Explorer 10では、ショートハンドである-ms-flexプロパティか、-ms-flex-negativeプロパティを使用します。

なお、flex-shrinkプロパティはショートハンドであるflexプロパティの2番目の指定にあたります。

  • ※ 未指定の値を正しく設定するため、flexプロパティを使用することを推奨しています。

構文

							flex:flex-grow 萎縮率 flex-basis;
							または
							flex-shrink:萎縮率;
						
プロパティ名 初期値 適用範囲 継承 設定可能値
flex-shrink 1 Flexアイテム しない 数値

サンプル1

次のサンプルでは、0:1:2の割合で指定した例です。

item 1

item 2

item 3

CSS

次のサンプルでは、1つ目のFlexアイテムのみを指定した例です。

item 1

item 2

item 3

CSS

CSS3逆引きリファレンス一覧へ戻る