Flexboxで画像や要素が小さくなる(潰れる)時の対処方法！

弊社で作った教材がセール中！

udemy セール中

※ 上記リンクからご購入いただければ、割引価格(1,500円)で購入できます。

Flexboxを使って横並びにしたら画像や要素が小さくなった(潰れた)

そんな時の解決方法をサンプルを用いて紹介します。

この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。

Flexboxの使い方をどこよりも詳しく解説！図解やサンプルもあり！

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス『Hello Mentor』を運営しています。

基礎学習後に迷子になっていませんか？脱初心者したいなら、私たちにお任せください！

基礎学習後にやるべきことがわからない...
スクール卒だけど実力不足だと感じている...
自分のコードが正しい書き方かわからない...
未経験から1人で転職できる気がしない...
独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

受け入れ人数制限あり

詳しく見る

サブスクで入会金・解約金・最低契約期間もなし

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

この記事の目次

起こる問題と解決策

画像が小さくなる
要素が潰れる

この2点について、例を出して解説します。

結論、どちらもflex-shrink: 0;を指定することで解決します。

画像が小さくなる

例えば、画像の幅を100pxに指定しているのに、100pxより小さく表示されてしまうケースです。

<div class="user-voice">
    <div class="user-voice-icon">
        <img src="img/user-voice-icon.png" width="500" height="500" alt="..." />
    </div>
    <p class="user-voice-text">テキスト...</p>
</div>

.user-voice {
    display: flex;
}

.user-voice-icon {
    width: 100px;
    flex-shrink: 0; /* これで小さくならない */
}

user-voice-iconに100pxだけを指定しても、user-voice-textの文章が長いと、画像が小さく表示されてしまいます。

これはflexアイテムのflex-shrinkの初期値が1なのが原因です。Flexboxでは、flexコンテナの幅にflexアイテムが収まりきらない場合、flexアイテムを縮小させる仕様なので、画像が小さくなってしまっています。※ 正しくは、縮小しているのは画像の幅だけではなく、テキストの幅もです。

flexコンテナの幅にflexアイテムが収まりきらない場合、flexアイテムを縮小させる

↑この点がポイントです。

収まりきる場合は縮小されないので、今回のケースだと文章が改行されないくらい短ければ画像が小さくなることはありません。従って、『PCでは小さくならないのに、SPでは小さくなってしまう...』なんてことが起こります。

この問題は、user-voice-iconにflex-shrink: 0;を指定するだけで解決します。flex-shrink: 0;を指定したflexアイテムは縮小しないので、画像が小さくなることはありません。テキストの幅だけが縮小します。

要素が潰れる

要素が潰れるケースです。画像が小さくなるケースと原因も解決方法も同じです。

flexコンテナの幅にflexアイテムが収まる場合、flexアイテムは縮小しないので、Qは潰れていません。

<div class="faq-item">
    <h3 class="faq-text faq-text--question">対応しているクレジットカードの種類を教えてください</h3>
    <p class="faq-text faq-text--answer">...</p>
</div>

.faq-text {
    display: flex;
    align-items: baseline;
}

.faq-text::before {
    ...
    flex-shrink: 0; /* これで小さくならない */
}

.faq-text--question::before {
    ...
    content: "Q";
}

.faq-text--answer::before {
    ...
    content: "A";
}

flex-shrink: 0;を追加するだけでです。

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？