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

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

Flexboxの孫要素を上下中央に配置したいんだけど、良い方法ないかな？

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

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

本記事で実現したいこと

下記が本記事で実現したい内容です。Flexboxの子要素（緑色のボックス）の高さを揃えて、子要素の中の孫要素（テキスト）を上下中央位置に配置しています。

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

上記では一番高さのある要素が基準になっていますが、高さをピクセルで指定して固定値にすることもできますので、環境に合わせてご使用いただければと思います！

では、早速作り方を見ていきましょう！

何はともあれHTMLを準備

というわけでさくっとHTMLを準備します。本記事ではリストが親要素、リストアイテムが子要素、パラグラグが孫要素になります。

<ul class="flex">

    <li class="flex-item">

        <p></p>

    </li>

    <li class="flex-item">

        <p></p>

    </li>

    <li class="flex-item">

        <p></p>

    </li>

</ul>

HTMLの準備は完了です。続けてCSSでスタイルを付けていきます！

親要素にflexを適用する

親要素、本記事では<ul>にdisplayのflexを適用します。flexを指定することで子要素を横並びにして、要素の高さを揃えます。

.flex {

    display: flex;

}

以上で親要素のスタイルの定義は完了です。

続いて子要素にスタイルを定義していきます。

子要素にflexを適用する

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

.flex {

    display: flex;

}

.flex-item {

    display: flex;

}

以上で子要素のスタイルの定義は完了です。後は子要素のコンテンツが上下中央に表示されるようにしていきましょう！

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

では子要素の<li>にalign-itemsを指定します。すべて指定した後のスタイルは下記のようになります。デモでは他にも記述していますが、本記事の内容で重要な部分だけを記載しています。

.flex {

    display: flex;

}

.flex-item {

    display: flex;

    align-items: center;

}

必要なのはたったの3行だけ…Flexboxは偉大ですね！

最後に

Flexboxを使えば少し複雑なスタイルでも短い記述で実現することができます。Floatで横並びにしていた時代では考えられないですね！

本記事でご紹介した内容はFlexboxでスタイルをする際に役立ちますので、ぜひ覚えていっていただければと思います！

以上、Flexboxで子要素の高さを揃えて孫要素を上下中央に配置する方法のご紹介でした！