【CSS】Flexboxで画像が縦に伸びてしまう状態の解決法

\ お買い物忘れにご注意!/

Flexboxは便利ですが、画像とテキストを横並びにした時に、
下記のようにテキストの高さが高くて、
画像が引き伸ばされてしまうことがあります。

See the Pen Untitled by kawashima (@kawashima) on CodePen.

こんな時は、display:flex;を書いてるタグに、
align-items: flex-start;を追記しましょう。

そうすると下記のように画像の高さが正常に戻ります。

See the Pen Untitled by kawashima (@kawashima) on CodePen.

コーディングをしていてCSSで悩む時にはぜひ専門書を一冊お手元に置いておくことをおすすめします。

こちらはフレックスボックスに関するもの。

参考になったらシェアお願いします!

この記事を書いた人

■自己紹介
MEDIARCS ディレクター 河島 靖
1984年5月生まれの39歳

■趣味
銭湯・サウナ行くこと(サウナ・スパ健康アドバイザー)
筋トレ(懸垂をよりできるようになりたい)
音楽鑑賞(Nujabes、NewJeansなど)
ヴィンテージもの、レザーグッズが好き

コメントはこちらよりお願いします

コメントする

目次