【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で悩む時にはぜひ専門書を一冊お手元に置いておくことをおすすめします。

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