【CSS】Flexboxで画像や要素が縮む原因と解決方法！flex-shrink: 0の使い方！

Webサイトを作っていると、Flexboxで横並びにしたときに画像や要素が勝手に縮んでしまうことはありませんか？

  • 幅を指定しているのに、画像が小さく潰れてしまう…
  • テキストが長いと、画像までギュッと縮まってしまう…

そんな時に役立つのがflex-shrink: 0です。

この記事では、以下の内容をサンプルコードや図を用いてわかりやすく解説します。

  • Flexboxで要素が縮んでしまう原因
  • flex-shrinkプロパティの仕組み
  • 具体的な解決方法

Flexboxで要素が縮んでしまう原因

Flexboxはとても便利なレイアウト手法ですが、コンテナ（親要素）の幅に収めるために、子要素を自動調整する性質があります。

例えば、次のように「画像」と「テキスト」を横並びにしたケースにおいて、テキストが「短い場合」と「長い場合」を考えましょう（後ほどサンプルコードを示します）。

  • コンテナの幅：400px
    • 画像とテキストを横並びに表示させる。
  • 画像の幅：200px
  • テキスト

テキストが短い場合には、画像が縮みません。しかし、テキストが長い場合、コンテナの幅に収まりきらないため、Flexboxは子要素のサイズを縮めて調整します。結果として、画像が指定した幅（200px）よりも小さく表示されてしまうのです。

Flexboxで要素が縮んでしまう原因

Flexboxの子要素のサイズを縮めたくない時に役立つのがflex-shrink: 0です。

flex-shrinkプロパティとは？

Flexboxの子要素は、デフォルトで以下のプロパティが適用されています。

flex-shrink: 1;

これは「必要に応じて縮んでもよい」という意味です。

  • flex-shrink: 1（初期値）
    • 親要素の幅が足りないとき、自動で縮む
  • flex-shrink: 0
    • 親要素の幅が足りなくても、その要素は縮まない

つまり、「縮んでほしくない要素」には flex-shrink: 0 を付けることが解決策になります。

ではこれから、flex-shrink: 0を「付けない場合」と「付けた場合」におけるサンプルコードを示します。

サンプルコード①：flex-shrink: 0を「付けない場合」

まずは、子要素が縮んでしまうケースを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox shrink例</title>
    <style>
      .container {
        display: flex;
        border: 2px solid #333;
        width: 400px;
      }
      .item-img {
        width: 200px;
        /* flex-shrink を指定していない（初期値は1） */
      }
      .item-img img {
        display: block;
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item-img">
        <img src="hero.jpg" alt="ヒーロー画像" />
      </div>
      <div>
        これはヒーローの画像です！これはヒーローの画像です！
        これはヒーローの画像です！これはヒーローの画像です！
        これはヒーローの画像です！
      </div>
    </div>
  </body>
</html>

表示結果

サンプルコード①：flex-shrink: 0を「付けない場合」

flex-shrink: 0を付けていないため、コンテナ（400px）に「画像（200px）＋テキスト」が入りきらない場合、画像が自動的に縮んで小さくなります。

サンプルコード②：flex-shrink: 0を「付けた場合」

次に、画像が縮まないようにCSSを修正してみましょう。

<style>
  .item-img {
    width: 200px;
    flex-shrink: 0; /* ← 縮まないように指定！ */
  }
</style>

表示結果

サンプルコード②：flex-shrink: 0を「付けた場合」

flex-shrink: 0を付けたため、画像は常に200pxをキープされ、子要素が縮まなくなっていることが確認できます。

flex-shrink: 0 の注意点

便利なflex-shrink: 0ですが、使い方には注意も必要です。

  • 親要素の幅より大きい要素をflex-shrink: 0にすると、横スクロールが発生する
  • スマホ画面のように幅が狭い環境では、レイアウト崩れの原因になることもある

そのため、「絶対に縮ませたくない要素」にだけピンポイントで使うのがおすすめです。

要素の最小幅（min-width）を指定する場合

Flexboxでは「縮む原因」はflex-shrink: 1によるものですが、要素の最小幅（min-width）を指定することで縮小を防ぐこともできます。例えば画像の幅を200pxにしたい場合は、以下のように書けます。

<style>
  .item-img {
    width: 200px;
    min-width: 200px; /* ← 最小幅を指定 */
  }
</style>

こうすると、Flexboxの挙動で自動的に縮もうとしても、200px未満にはならないため、画像が潰れなくなります。

本記事のまとめ

この記事では『Flexboxで画像や要素が縮む原因と解決方法』について、以下の内容を説明しました。

  • Flexboxで要素が縮んでしまう原因（flex-shrink: 1が初期値であるため）
  • flex-shrink: 0を指定することで縮みを防ぐ方法
  • min-widthを使って最小幅をキープする方法
  • スマホなど狭い画面での注意点

お読み頂きありがとうございました。

スポンサーリンク