高さの違う要素をCSSで均等に揃える方法

最近実務のコーディングで、高さの違う要素を揃える実装をしたので、復習がてらブログにまとめることにしました。

意外とよく出る実装なので、これを機にマスターしましょう。

高さの違う要素をCSSで均等に揃える方法

デモサイトはこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

高さが揃っていることが分かるでしょう。

HTML

HTMLコードはこちら。

<div class="wrap">
    <div class="box">
        <h2>見出しタイトル</h2>
    </div>
    <div class="box">
        <a href="">
            <h3>メニュータイトル</h3>
            <p>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</p>
            <p>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</p>
            <p>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</p>
        </a>
    </div>
    <div class="box">
        <a href="">
            <h3>メニュータイトル<br></h3>
            <p>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</p>
        </a>
    </div>
</div>

親要素であるwrapの中にコンテンツの高さがそれぞれ違う子要素boxを格納しました。

CSS

高さの違う要素を揃えるポイントは、揃えたい子要素の親要素に対して「display: flex;」を当てることです。

.wrap {
  display: flex;
}

1つ注意点があり、「align-items: center;」を一緒に指定してしまうと高さが揃わなくなるので気をつけてください。

まとめ

以上が、高さの違う要素をCSSで均等に揃える方法でした。

関連記事:

【CSS】テーブルの作り方について CSSで背景を透過させる方法について 【JS】固定headerを一定間スクロールしたら背景色を変える方法 【CSS】aタグをクリックできる範囲をheaderの高さと一緒にする方法