- Flexboxを使って横並びにしたら画像や要素が小さくなった(潰れた)
そんな時の解決方法をサンプルを用いて紹介します。
この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。
CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!コーディング教材作りました 🎉
こんな方におすすめです。
- コーダー・フロントエンドエンジニアを目指している
- 基礎学習を終えて実践的な"練習"がしたい
- XDのデータを見ながらコーディングの練習をしたい
- プロのコードを見たい
- 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-icon
に100px
を指定しても、user-voice-text
の文章が長いと、画像が小さく表示されてしまいます。
これはflexアイテムのflex-shrink
の初期値が1なのが原因です。Flexboxでは、flexコンテナの幅にflexアイテムが収まりきらない場合、flexアイテムを縮小させる仕様なので、画像が小さくなってしまっています。
※ 正しくは、縮小しているのは画像の幅だけではなく、テキストの幅もです。どちらも縮小して1行に収まっています。
『flexコンテナの幅にflexアイテムが収まりきらない場合、flexアイテムを縮小させる』この点がポイントです。
収まりきる場合は縮小されないので、今回のケースだと文章が改行されないくらい短ければ画像が小さくなることはありません。従って、『PCでは小さくならないのに、SPでは小さくなってしまう...』なんてことが起こります。
💡 解決方法
.user-voice-icon {
width: 100px;
flex-shrink: 0; /* 追加 */
}
user-voice-icon
にflex-shrink: 0;
を指定するだけで解決します。flex-shrink: 0;
を指定したflexアイテムは縮小しないので、画像が小さくなることはありません。テキストの幅だけが縮小して1行に収まります。
要素が潰れる
要素が潰れるケースです。画像が小さくなるケースと原因も解決方法も同じです。
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;
を追加するだけでです。
他にも関連の記事を上げています!
CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!レイアウトを作るにはFlexboxの理解が必須です。基礎を学びたい方は上の記事をご覧ください。
【CSS Grid入門】図解も交えて使い方を詳しく解説!Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は上の記事をご覧ください。
この記事のように、知っておくと良い、Flexbox関連のお悩み解決系の記事も多数あげています。
Flexboxで均等幅(同じサイズ)で横並び配置する方法!Flexboxで最後の1つだけ右寄せや下寄せにする方法!Flexboxとネガティブマージンでカード型レイアウトを実装する方法!Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法!プログラミングで何時間も無駄に悩みたくない方へ!
駆け出しエンジニアの、無駄な遠回りをなくすことを目的に、メンタリングサービスをはじめました。
- 正しい教材の選定ができていない可能性がある
- 間違った方向に進んでいる可能性がある
- 必須スキルの欠落に気づかない
- 30分以上悩むのは時間の無駄
独学でもプログラミングの勉強は可能です。しかし、上記の点でとても非効率です。
コーダー/フロントエンドエンジニアを目指している向けにメンターをやっているので、最短でスキルアップしたい方は、ぜひご活用ください。
駆け出しエンジニア/デザイナー向けメンタリングサービスはじめました