【CSS】flexで子要素の高さを揃えてコンテンツを上下中央に配置する

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSのflexで子要素の高さを揃えてコンテンツを上下中央に配置する方法をご紹介しています。

上記の疑問にお答えしています。

では、解説していきます。

本記事でやりたいこと

Flexコンテナ内の要素の高さを揃え、子要素（フレックスアイテム）内のコンテンツを上下中央位置に配置します。下記にデモを用意しましたので、表示をご確認いただければと思います。

See the Pen 6240 by ryohei (@intotheprogram) on CodePen.

上記デモでは、一番高い子要素に高さを揃えてます。高さをピクセルで指定して固定値にすることもできますので、環境に合わせて変更いただければと思います。

HTMLでレイアウトを作成する

HTMLでレイアウトを作成します。本記事ではリストが親要素、リストアイテムが子要素、段落が孫要素になります。

<ul class="flex">
    <li class="flex-item">
        <p>Lorem ipsum dolor sit amet</p>
    </li>
    <li class="flex-item">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </li>
    <li class="flex-item">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </li>
</ul>

親要素にflexを適用する

親要素、本記事では<ul>にdisplayのflexを適用します。flexを指定することで子要素を横並びにして子要素（フレックスアイテム）の高さを揃えます。

.flex {
    display: flex;
}

子要素にflexを適用する

親要素同様に子要素の<li>にもdisplayのflexを指定します。こうすることで子要素がフレックスコンテナとなり、孫要素がフレックスアイテムになります。

.flex {
    display: flex;
}
    
.flex-item {
    display: flex;
}

子要素をフレックスコンテナに指定できましたので、最後に子要素のコンテンツを上下中央に配置するようにCSSプロパティを指定します。

子要素にalign-itemsのcenterを適用する

子要素の<li>にalign-itemsを指定します。こうすることでフレックスアイテム内のコンテンツが上下中央に配置されます。

.flex {
    display: flex;
}
    
.flex-item {
    display: flex;
    align-items: center;
}

必要なプロパティはたったの3つだけ。flexは偉大ですね！

最後に

flexを使えば複雑なレイアウトを短い記述で実現することができます。floatで横並びにしていた時代では考えられない便利さですね。現在はflexでレイアウトを作成するのが一般的になっていますので、頻繁に使用するプロパティと値を覚えておくとコーディング時間を短縮することができます。本記事でご紹介した内容はよく使用する手法ですので、覚えておいていただければと思います。

以上、CSSのflexで子要素の高さを揃えてコンテンツを上下中央に配置する方法のご紹介でした！