【HTML/CSS】横並びのひ孫要素まで高さを揃える方法｜riyo

こんにちは。riyoです。 今回は、最近覚えた「横並びレイアウトの中身の高さを揃える方法」で『ひ孫要素の高さまで揃える方法』を紹介したいと思います！ 横並びレイアウトの中身の高さを揃える方法 まずは、「横並びレイアウトの中身の高さを揃える方法」を紹介します。 以下のような ”テキストの文字数が違うけど高さを揃えたい” というデザインをコーディングしないといけない場面に出会うことはありませんか？ デザインこんな時、ただ縦積みのボックスを「display: flex;」で横並びにするだけでは、テキストの文字数が違うためbtnの位置がずれてしまいますよね？ このままでは、親要素（クラス名：flex）の子要素（クラス名：box）しか高さを揃えることができません。 【HTML①】<div class="flex"> <div class="box" id="red"> <img src="画像パス"