CSSで要素の高さをそろえるのって、どうすればいいんだろうと悩みますよね。jQueryのプラグインとかもありますが、CSSでも可能なので...目次Flexboxを使用しただけで要素の高さがそろう理由まずはこちらのサンプルコードをご覧ください。黄色の孫要素(p)の高さがそろって、青色の孫要素(p)の色が違います。CodePen.この理由について解説していきます。stretchが設定されます。flexコンテナ(display:flexを指定している要素)に合わせて、子要素(li)の高さが自動で収縮する。いう設定が行われています。デフォルトで設定されている状態です。子要素(li)自身の縦方向の位置をそろえるCSSにります。子要素(li)の高さが自動で収縮して揃うというなんとも便利な設定ができてしまいます。設定できる値は、こちらにまとめてあります。CodePen.わかりやすさのために、孫要素(p)の背景色は消しています。すると、子要素(li)がそろう位置が下になり、高さも収縮しないので、孫要素(p)の高さをそのまま反映しています。部分のコメントアウトを外してみてください。子要素(li)の高さがそろいます。セットしているからです。設定が適応されるということになります。自動収縮する効果は子要素(li)までにしか効きません。孫要素(p)の高さはそろっていないんですね。指定すると、孫要素(p)の高さがそろいます。こちらの子要素(li)のコメントアウトを外してみてください。CodePen.たったそれだけで、孫要素(p)の高さも一瞬でそろいます。孫要素(p)の高さをそろえようと思った時に、孫要素(p)にこちらを設定する方もいるかと思います。自分も最初はやりました。100%;}これ一瞬そろっているように見えるんです。100%;が効かず、結局そろってない!ということになるので、この方法はやめておきましょう。設定するほうが確実で安全です。おわりに今回はFlexboxを使用しただけで要素の高さがそろう理由を解説を解説していきました。