模写修行メディア

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

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

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

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

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

💡 コーディングの練習なら模写修行!

無料教材もあります!

【こんな方におすすめ】

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい
公式サイトを見る
コーディング教材の【模写修行】は他の教材と何が違うのか?

この記事の目次

起こる問題と解決策

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

この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>
/* 画像のスタイルリセット */
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* -------- */

.user-voice {
    display: flex;
}

.user-voice-icon {
    width: 100px;
}

.user-voice-text {
    margin-left: 24px;
}

このようにuser-voice-icon100pxを指定しても、user-voice-textの文章が長いと、画像が小さく表示されてしまいます。

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

※ 正しくは、縮小しているのは画像の幅だけではなく、テキストの幅もです。

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

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

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

解決方法

.user-voice-icon {
    width: 100px;
    flex-shrink: 0; /* 追加 */
}

user-voice-iconflex-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 + .faq-text {
    margin-top: 8px;
}

.faq-text::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-weight: bold;
    border-radius: 50%;
    margin-right: 16px;
}

.faq-text--question::before {
    content: "Q";
    background-color: #c5ab5f;
    color: #fff;
}

.faq-text--answer::before {
    content: "A";
    border: 2px solid #c5ab5f;
    color: #c5ab5f;
}

解決方法

.faq-text::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-weight: bold;
    border-radius: 50%;
    margin-right: 16px;
    flex-shrink: 0; /* 追加 */
}

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

他にもFlexbox関連の記事を上げています!

レイアウトを作るにはFlexboxの理解が必須です。基礎を学びたい方は下記の記事をご覧ください。

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

Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は下記の記事をご覧ください。

【CSS Grid入門】図解も交えて使い方を詳しく解説!

この記事のように、知っておくと便利なFlexbox関連の記事も多数あげています。

Flexboxで均等幅(同じサイズ)で横並び配置する方法!Flexboxで最後の1つだけ右寄せや下寄せにする方法!Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法!

超実務向け!コーディングの練習が出来るサービス作りました 🎉

模写修行

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ!

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 何を考えながらコードを書くのか知りたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか?

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

嬉しい声もいただいています!

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

【残り1人】メンターやってます!

👉まずは気軽に聞いてみる

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。フリーランス歴11年 / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材