【備忘録】FlexBoxで画像が縦に伸びてしまう問題を解決する方法
トップ画像のように、画像と文字をdisplay:flex;で横並びにすると、画像が伸びてしまいます。
この理由と解決法です。
なお、念のための情報として、この画像はこちらのサイトからいただいたデータから模写コーディングした際の画像です。
1 2 3 4 | <li class="mail-box"> <img src="img/mail.png" alt="メールマーク"> <a href="#">MAIL</a> </li> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .mail-box { width: 96px; height: 48px; display: flex; background-color: $maincolor2; img { display: inline-block; } a { color: #fff; line-height: 48px; } } |
FlexBoxで画像が縦に伸びてしまう問題を解決する方法
display:flex;を指定した要素に、aling-itemsの初期値以外を指定すれば解決します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .mail-box { width: 96px; height: 48px; display: flex; // align-itemsを指定↓ align-items: center; // align-itemsを指定↑ background-color: $maincolor2; img { display: inline-block; } a { color: #fff; line-height: 48px; } } |
そうすれば、この通り画像の伸びが解除されます。
なぜFlexBoxで画像が縦に伸びてしまっていたのか
align-itemsとは、flexboxの親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定するものです。
ここで、何も指定しなければ初期値が反映されます。
初期値はalign-items:stretch;
アライン-アイテムズ、ストレッチ なので、子要素の画像が親要素の高さに可能な限りストレッチして伸びて配置されます。
これが影響して、画像が伸びてしまったというわけです。
それを防ぐために、
align-items: flex-start;を初期値以外にすれば解決します。
参考・align-itemsに指定できる値・一覧
1 2 3 4 5 6 7 8 9 10 11 | // 上揃えで要素を配置 align-items: flex-start; // 下揃えで要素を配置 align-items: flex-end; // 中央揃え align-items: center; // アルファベットの基準線揃え align-items: baseline; |
