display:flexで横並びの高さを揃える方法について解説します。横並びしている要素の高さがばらついているから親要素の高さに合わせたい!CSSで子要素の高さを親に合わせる方法を解説します。「縦の画像でも横の画像でもキレイにならべたい!」高さの異なる画像の高さを揃える方法を解説します。<div>右</div></div>「display:flex」は要素を横並べなどできるCSSです。「align-items」はdisplay:flexとセットで使えるCSSで縦方向の位置を調節できます。「align-items:stretch」を指定すると要素を縦方向に最大まで広げます。これにより横並びの高さを揃えることができます。「align-items」の初期値は「stretch」であるため、コレを指定しなくても横並びの高さが揃います。<div>右</div></div>ブロックの中の文字を中央寄せしたいとしましょう。これを親要素に指定すると「align-items:stretch」が効かなくなるため高さがそろわなくなってしまいます。center」を指定します。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む孫要素の高さも揃えたいとき横並び要素の中にもさらに要素がある場合です。flexは孫要素には効かないため「align-items:stretch」は効いておらず、高さがそろいません。href="#">右</a></div></div>display:flexは子要素に対して機能しますが、孫要素には影響ありません。孫要素の高さも揃えたい場合、子要素にもdisplay:flexとalign-items:stretchを指定しましょう。この場合は横並びになっている要素にdisplay:flexを指定します。【まとめ】flexで横並びの高さを揃える方法display:flexとalign-items:stretchを指定しましょう。孫要素の位置調整をするには子要素にもdisplay:flexを指定しましょう。display:flexで横並びの高さを揃える方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。