Flexboxで画像が縦に伸びてしまうのを直す方法

HTML・CSS・Javascript

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

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

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

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

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

コメント