Flex Shrink（flex-shrink）プロパティ

最終更新：2026-09-13

flex-shrink Flex Shrink（flex-shrink）プロパティ

flex-shrink プロパティはフレックスアイテムの収縮係数を設定し、コンテナの空間が不足したときにアイテムがどれだけ縮むかを決めます。初期値は 1 で、アイテムは必要に応じて縮みます。値を 0 にすると、空間が不足してもアイテムは元のサイズを維持します。値が大きいほど、空間が足りないときにより強く縮みます。

カテゴリ
初期値	1
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

flex-shrink: <number>;

⚙️ 値

値	タイプ	説明
`<number>`	タイプ	収縮係数。0 はアイテムが縮まないことを意味する

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
flex-shrink	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： flex-shrink は単位のない比率で、負の値は受け付けません。縮小量は各アイテムの flex-shrink 値に比例して配分されます。あるアイテムが 2 で別のアイテムが 1 なら、前者は後者の 2 倍縮みます。

注意： flex-shrink が効果を発揮するのは、コンテナの空間が不足したときだけです。アイテムの合計幅がコンテナを超えない場合、flex-shrink は効果がなく、アイテムは元のサイズを維持します。

❓ よくある質問

Qflex-shrink: 0 の実用的な使い方は何ですか？

Aサイドバー、ロゴ、アイコンボタン、ページネーションなど、固定サイズを維持しなければならない要素によく使われます。これらの要素はコンテナの空間が不足しても圧縮されないため、可読性とクリック可能領域が保たれます。典型的な組み合わせは、コンテンツ領域に flex-shrink: 1 を使って流動的に縮め、サイドバーに flex-shrink: 0 を使って固定することです。なお、flex-shrink が効くのは flex-basis とコンテンツサイズの計算が終わった後なので、固定要素が実際にコンテナより広い場合にのみ効果が現れます。

Qflex-shrink: 0 を設定しているのに、なぜアイテムが圧縮されるのですか？

A考えられる原因は以下のとおりです。アイテムに設定した max-width や min-width が収縮設定と競合している。親コンテナが収縮ではなく overflow: hidden でコンテンツを切り取っている。flex-basis が auto でアイテムに折り返し可能な長文が含まれている。よくある間違いは、後から指定した flex: 1 などのショートハンドが flex-shrink を 1 に戻してしまうことです。プロパティが無視されているように見える場合はカスケード順序を確認してください。アイテムのサイズに関する宣言全体と親の overflow 設定を確認し、flex-shrink: 0 がその要素自体に書かれていることを確かめてください。

Qflex-shrink: 1 と flex-shrink: 0 を混用するとどうなりますか？

A空間が足りないとき、flex-shrink 値が大きいアイテムほど縮みます。混用すると、flex-shrink: 1 のアイテムは比例して縮み、flex-shrink: 0 のアイテムはサイズを維持するため、縮む側のアイテムはさらに狭くなり、コンテンツがはみ出したり折り返したりすることがあります。これはまさに一般的なレイアウト技法です。サイドバーを flex-shrink: 0 で固定し、コンテンツ領域を flex-shrink: 1 で縮ませます。