WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： ノムさん
カテゴリー： マークアップ >CSS

Flexboxで横並びのレイアウトを作成する際に、要素が潰れてしまうことはありませんか？例えばこのような「画像」と「文章」が並んだ時です。

(短い文章だと大丈夫！でも…）

（文章が長いと画像が縮んでしまう…！）
今回はこのような状況になってしまった時の対処方法についてお伝えいたします。

解決方法

例えばこのようなコードを記述したとします。

html

<div class="qam-box">
  <div class="qam-img">
    <img
      src="https://www.qam-web.com/wp-content/uploads/2024/06/qam_logo.png" alt="画像" width="62" height="55" class="alignnone size-full wp-image-22072"
    />
  </div>
  <p class="qam-text">
    秋田オフィス開設のお知らせ<br>株式会社アイ・セプト（本社：愛知県名古屋市 代表取締役社長：入谷高広）は、2024年（令和6年）5月9日、秋田県秋田市にオフィスを開設しましたのでお知らせします。
  </p>
</div>

css

.qam-box {
  display: flex;
}
.qam-img {
  flex-shrink: 0;　/* 幅を変更したくない要素に指定 */
  width: 200px;
}
.qam-img img {
  display: block;
  height: auto;
  width: 100%;
}
.qam-text {
  font-size: 20px;
  line-height: 1.5;
  margin-left: 20px;
}

ここで縮めたくない要素に対して「flex-shrink: 0;」を指定してください。
すると下の図のように要素が縮まなくなります。

（画像が縮まなくなりました！）

原因

Flexアイテム全てに初期値の「flex-shrink: 1;」が指定されていることが原因です。親要素からはみ出さないように自動で縮小してくれています。画像だけが縮小しているように見えますが、文章の幅も縮小しています。
ここで幅を変更したくない要素に「flex-shrink: ０;（縮ませない）」を指定します。すると要素の幅はそのままで、文章の幅のみが縮んでくれるようになります。

まとめ

flex-srhink はFlexアイテムを縮小させるプロパティです。ですが、「縮めない」場合にも使うことが出来ます。
今回ご紹介した画像とテキストが横並びになっているレイアウトはよくあるデザインなので、flexプロパティを活用してみてください！