CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-shrink制御

Web APP CSS
スポンサーリンク

flex-shrink を理解すると「狭くなったときの振る舞い」をコントロールできる

flex-shrink は、コンテナが狭くなったときに「どの要素をどれだけ縮めるか」を決めるプロパティです。
flex-grow が「余ったスペースの配分」なら、flex-shrink は「足りないスペースの削り方」です。

これを理解すると、
「このボタンは絶対に潰したくない」
「このテキストは多少縮んでもいい」
といった細かいレイアウト制御ができるようになります。

CSS と Tailwind CSS の両方で、実例ベースでかみ砕いていきます。

flex-shrink の基本概念

0 と 1 の違いをまず押さえる

初期値は 1 です。
1 のとき、その要素は「コンテナが狭くなったら縮んでもいい」という意味になります。
0 にすると、「縮まない（できるだけ元の幅を保つ）」という意思表示になります。

つまり、

  • flex-shrink: 1; → 足りないときに縮む（デフォルト）
  • flex-shrink: 0; → 足りなくても縮まない（できるだけ守る）

Tailwind ではそれぞれ

  • shrink（= flex-shrink: 1）
  • shrink-0（= flex-shrink: 0）

です。

例1：テキストは縮んでもいいが、ボタンは縮ませたくない

CSS 版

.container {
  display: flex;
  gap: 8px;
}

.text {
  flex-shrink: 1; /* デフォルト */
}

.button {
  flex-shrink: 0;
}
CSS
<div class="container" style="width: 260px; border:1px solid #ddd;">
  <div class="text">
    とても長いテキストがここに入ります。幅が足りないときは縮んでほしい。
  </div>
  <button class="button">
    決定
  </button>
</div>
HTML

コンテナが狭くなると、テキスト部分が縮み、ボタンは幅を保とうとします。

Tailwind 版

<div class="flex gap-2 w-64 border border-gray-300 p-2">
  <div class="shrink text-sm text-gray-700">
    とても長いテキストがここに入ります。幅が足りないときは縮んでほしい。
  </div>
  <button class="shrink-0 px-3 py-1.5 bg-blue-600 text-white text-sm rounded">
    決定
  </button>
</div>
HTML

ここでのポイントは、
「守りたい要素（ボタン）に shrink-0 を付ける」
という発想です。

例2：アイコンは固定サイズ、テキストだけ縮ませる

CSS 版

.item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.text {
  flex-shrink: 1;
}
CSS
<div class="item" style="width: 200px; border:1px solid #ddd;">
  <div class="icon" style="background:#3b82f6;"></div>
  <div class="text">
    長めのタイトルテキストが入ります。
  </div>
</div>
HTML

Tailwind 版

<div class="flex items-center gap-2 w-52 border border-gray-300 p-2">
  <div class="w-8 h-8 bg-blue-500 rounded shrink-0"></div>
  <div class="shrink text-sm text-gray-800">
    長めのタイトルテキストが入ります。
  </div>
</div>
HTML

アイコンは常に 32px を保ち、テキストだけが幅に合わせて縮みます。

例3：3カラムのうち、真ん中だけ縮んでほしい

CSS 版

.columns {
  display: flex;
  gap: 8px;
}

.left,
.right {
  width: 120px;
  flex-shrink: 0;
}

.center {
  flex-shrink: 1;
}
CSS
<div class="columns" style="width: 320px; border:1px solid #ddd;">
  <div class="left" style="background:#bfdbfe;">左</div>
  <div class="center" style="background:#93c5fd;">
    真ん中のカラムだけ縮んでほしい
  </div>
  <div class="right" style="background:#bfdbfe;">右</div>
</div>
HTML

Tailwind 版

<div class="flex gap-2 w-80 border border-gray-300 p-2">
  <div class="w-28 bg-blue-200 shrink-0">左</div>
  <div class="bg-blue-300 shrink text-sm">
    真ん中のカラムだけ縮んでほしい
  </div>
  <div class="w-28 bg-blue-200 shrink-0">右</div>
</div>
HTML

左右のカラムは幅を守り、中央だけが状況に応じて縮みます。

flex-shrink の深掘りポイント

「縮むかどうか」はコンテナが狭くなったときだけ意味を持つ

flex-shrink は、コンテナの幅が「子要素の合計幅より小さい」ときにだけ効きます。
余裕があるときは、grow やベース幅の方が効いています。

なので、
「縮み方がおかしい」と感じたら、まずは

  • コンテナの幅
  • 子要素の min-width / width
  • flex-basis / flex の指定

あたりも一緒に見る必要があります。

shrink: 0 は「絶対に縮まない」ではない

ブラウザは最終的に「どうしても入らない」と判断した場合、
オーバーフローさせたり、はみ出させたりします。

つまり shrink: 0 は
「この要素はできるだけ縮めたくない」という“強い希望”であって、
物理法則をねじ曲げる魔法ではありません。

flex: 1 と shrink の関係も軽く押さえておく

よく使う flex: 1; は

flex: 1 1 0;
CSS

なので、
flex-shrink: 1; が含まれています。

Tailwind の flex-1 も同じです。

「この要素は広がってもいいし、縮んでもいい」という
“柔軟なボックス”になります。

一方で、
「広がってもいいけど、縮んでほしくない」
という場合は、例えば

flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
CSS

のように、grow と shrink を分けて指定することもあります。

Tailwind なら

<div class="grow shrink-0 basis-0">
HTML

のように書けます。

実践テンプレート：よく使う flex-shrink 制御

ボタンを守りつつテキストを縮ませるヘッダー

<header class="flex items-center gap-3 w-full max-w-md border border-gray-300 p-2">
  <div class="shrink-0 font-bold">
    LOGO
  </div>
  <div class="shrink text-sm text-gray-700">
    とても長いページタイトルがここに入ります。幅が足りないときは縮んでほしい。
  </div>
  <button class="shrink-0 px-3 py-1.5 bg-blue-600 text-white text-xs rounded">
    ログイン
  </button>
</header>
HTML

アイコンとテキストのレイアウトでアイコンを固定

<div class="flex items-center gap-2 w-56 border border-gray-300 p-2">
  <div class="w-8 h-8 bg-emerald-500 rounded-full shrink-0"></div>
  <p class="shrink text-sm text-gray-800">
    長めの説明テキストが入ります。ここは縮んでもOK。
  </p>
</div>
HTML

まとめ

flex-shrink は、
「コンテナが狭くなったとき、どの要素をどれだけ犠牲にするか」
を決める、とても人間くさいプロパティです。

CSS では
flex-shrink: 1;（縮んでもいい）
flex-shrink: 0;（できるだけ縮めたくない）

Tailwind では
shrink
shrink-0

を軸に考えれば、実務で困ることはほぼありません。

「この要素は守りたいか？」「この要素は譲ってもいいか？」
そんな感覚で shrink を付けていくと、レイアウトがぐっと“意図通り”になっていきます。

スポンサーリンク
タイトルとURLをコピーしました