flexboxの横並びレイアウトで子孫を揃える方法 ::: コーダー日誌 ::: coder's log :::

テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■ こんな感じで背景が揃わないよ！というときがあります。 この例ではhtmlは以下のような構成になっています。タグはコンテンツに合ったものを使えば何でも良いです。この例なら画像＋画像の説明という妄想なので、figure>img＋figcaptionという組み合わせのほうがよかったかもですね。 <div class="flex"> <div> <p>コンテンツ1</p> <p>コンテンツ2</p> </div> <p>コンテンツ3</p> </div> この時点では親要素のclass[flex]には以下のようなcssが記述されています。 なお、子要素にはwidthを設定してあります。 displa