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

自己紹介

1984年生まれの40歳、オンラインビジネスの仕事をしている河島靖です。
以前までWEB制作・イベント制作業などの受託ビジネスをしてきましたが、仕事も時間も自分でコントロールできないことが大きな悩みでした。
現在は自分でコントロールできるオリジナルコンテンツでのビジネスをメインにし、現在も絶賛チャレンジ中です。
事業としてはブログアフィリエイト・Amazonでの輸入販売・AmazonでのオリジナルOEM商品販売・Kindle書籍出版・ファンクラブ運営などを行っています。
今後はSEOに頼らないオンラインでの教育コース開発やマーケティングファネルを使ったビジネスを構築したく活動しています。メルマガでも情報発信しています。

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

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

当ブログサイトはWordPressテーマ「SWELL」で作られています。
初心者でも更新しやすく、SEOに強いシンプルなデザインテーマです。

SWELL公式のデモサイトを見てみる

コメントはこちら

コメントする

本記事の目次