レイアウト

flex-shrink

flex-shrink は、フレックスボックスの項目に書いて、項目が箱に入りきらないときに、その項目がどれだけ縮むかを指定します。

構文

<number [0,∞]>

プレビュー

1234

プリセット

見本

項目

右下の角をドラッグするとサイズを変えられます

コード

.box {
  display: flex;
}

.box > :nth-child(2) {
  flex-shrink: 0;
}

コントロール

flex-shrink0

1234

解説

値の書き方

0 以上の数を単位なしで書きます。初期値は 1 で、ほかの項目と同じ割合で縮みます。0 にすると縮みません。箱（フレックスボックス）ではなく、中の項目に書くプロパティです。

このページのプレビューは、補助の宣言で箱を display: flex にして、2 番目の項目だけに flex-shrink を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。項目はどれも箱の 30% の幅なので、4 つ並べると箱からはみ出します。ほかの項目は初期値の 1 で縮むので、縁取りした 2 の項目の値を変えると、2 だけ縮み方が変わります。

縮める量の分け方

箱からはみ出す幅を、項目ごとに「flex-shrink × 元の大きさ（flex-basis）」の比で分けて、それぞれの項目から引きます。元の大きさが同じなら flex-shrink の比どおりで、3 の項目はほかの 3 倍縮みます。元の大きさが大きい項目ほどたくさん縮むので、値がすべて 1 でも、幅の広い項目のほうが多く縮みます。

中身より小さくはならない

フレックスボックスの項目は、初期値で中身の最小の幅（長い単語や画像の幅）より小さく縮みません（min-width: auto）。縮みきれなかった分は、ほかの項目が代わりに縮みます。長い URL などで項目が縮まないときは、項目に min-width: 0 を書きます。overflow: hidden などを書いた項目も、中身の最小の幅より小さく縮みます。

折り返す箱では

flex-wrap: wrap の箱では、入りきらない項目は次の行に送られるので、項目が縮むのは 1 つの項目だけで行の幅を超えるときだけです。

flex ショートハンド

ふつうは flex ショートハンドで、flex-grow・flex-basis とまとめて書きます。flex: none は flex: 0 0 auto と同じで、伸びも縮みもしません。アイコンなど、幅を変えたくない項目に使います。

参考リンク

MDN Web Docsflex-shrink SpecificationCSS Flexible Box Layout Module Level 1 Can I useflex-shrink

解説