【現象】高さがそろってしまうdisplay:flexは子要素を横並べすることができるCSSです。これを指定しただけでは子要素が親要素と同じ高さになってしまいます。下記は左が4行分の高さになっており、右もその高さにそろってしまっている例です。<div>右</div></div>子要素の高さをそろえない、それぞれの高さにする方法を解説します。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【解決】align-items:flex-start子要素の高さをそろえないためにはdisplay:flexを指定している要素に「align-items:flex-start」を追加します。<div>右</div></div>align-itemsはdisplay:flexとともに使い、子要素の縦方向の位置を調整するCSSです。初期値は「align-items:normal」であり、これは「align-items:stretch」と基本的に同じ効果となります。「align-items:stretch」は子要素の高さを親要素にそろえるものです。何も指定しない状態では子要素の高さが親要素にそろってしまいます。「align-items:flex-start」は子要素を始めの位置(上)にそろえるものです。「stretch」が上書きされ解除されることで高さがそろわなくなります。display:flexで解決できること9選!display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。この記事を読む【まとめ】flexで高さをそろえない方法display:flexを指定している要素に「align-items:flex-start」を追加する。以上、flexで高さをそろえない方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。