flex要素を横並びにしても高さが揃わない！を解決する

最近はgridを使用する方も増えてきましたが、やっぱり便利なflexプロパティ。
そんなflexを横並びにした時に高さが揃わないことってありませんか？
そんな時に確認するべき場所を記載致します。

以前似たような記事も書いてますので、こちらもご参考ください。

: flex要素の高さを揃える方法

2024/1/18 HTML/CSS, Web制作

要素を左右に並べる場合、以前はfloatなどを使ってましたね。ですが、float を使うとclear しないといけなかったりレイアウトが崩れやすかったり使いづらいですよね。現在はほとんどの方がflex ...

HTML&CSS

スクール不要！独学でWebエンジニアなれるWeb教材

Web制作学習に役立つサービスを見つけてしまいました。
このCode Lessonは、「未経験から独学でプロを目指す」というコンセプトのもと、実践的なコーディング学習ができるプログラミング学習サービスです。
全てブラウザ上で学習できるので、環境構築不要！登録後すぐにコードが書けます。

プロのエンジニアが設計した学習ロードマップで、アプリやWebサイトを最短開発を目指せる。
分かりやすいスキルスライドでと、コーディングチャレンジで知識を定着！
WebサイトやWebアプリなどの実装レッスンで実践的な学習が可能です。
3月25日まで1,000円割引の永年月1,980円で利用可能。

\ まずは無料で体験してみる /

Code Lesson

「align-items」プロパティを指定している

まず一つ目は「aligin-items」プロパティを使用している例です。
「aligin-items」はflexアイテムの配置を指定するプロパティです。
横並びの場合は、上下の位置を指定します。

便利なプロパティですが、「 align-items: stretch」以外のプロパティを指定すると高さが揃いません。
「 align-items: stretch;」は親要素に合わせて高さが伸縮しますので、すべての子要素の高さが揃います。

よくあるのが、「align-items: center」プロパティを使用している場合です。
下の図は「align-items: center」を使用しています。

flexitem1 flexitem2
flexitem2 flexitem3
flexitem3
flexitem3

<div class="wrap">
    <a class="btn">flexitem1</a>
    <a class="btn">flexitem2<br>flexitem2</a>
    <a class="btn">flexitem3<br>flexitem3<br>flexitem3</a>
</div>

    .wrap {
        border: 1px solid #000;
        display:flex;

        /*align-items: centerを指定している*/
        align-items: center;
    }

    .btn {
        background: #000;
        color: #fff;
        width: 200px;
        border: 1px solid #231815;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
    }

そして、「align-items: center;」を削除したものが下記になります。
align-itemsプロパティの初期値はstretchです。

flexitem1 flexitem2
flexitem2 flexitem3
flexitem3
flexitem3

高さが揃いました！

flex子要素に「height: 100%;」を指定している

もう一つよくあるのがflexアイテムの子要素に「height: 100%」を使用している例です。
高さを揃えたいんだから「height: 100%」でどうにかできるだろ！
と思いますが、俺にもそう思っている時期がありました。

    .wrap {
        border: 1px solid #000;
        display:flex;
    }

    .btn {

        /*height: 100%を指定している*/
        height: 100%;

        background: #000;
        color: #fff;
        width: 200px;
        border: 1px solid #231815;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
    }

「height: 100%」を指定していると、「align-items: stretch;」を使用していても高さが揃いません。

height: 100%は親要素の高さに応じて、相対的に高さが決まります。
親要素である「.wrap」には高さが指定されていないため、「height: 100%」が聞かないんですね。

ということで解決策は３つになります。

「height: 100%」を削除する

そもそも「height: 100%」を削除してしまうということです。
揃えるだけなら必要ないので削除しましょう。

flex親要素に高さを指定する

「height: 100%」の高さが相対的に決まるなら親要素である、「.wrap」に高さを指定すると、子要素である「.btn」で「height」を％で指定できるようになります。

    .wrap {
 　    /*親要素に高さを与える*/
　　　　height: 300px;
    }

    .btn {

        /*height: 100%で高さを300pxにする*/
        height: 100%;
    }

flex子要素に高さを指定する

子要素に高さをpxやremなどで指定する方法です。
ただ、高さが変わらないならいいですが、カードなど高さが変わりやすいならあまり良い方法ではないですね。

    .btn {
        /*heightで高さを300pxにする*/
        height: 300px;
    }

まとめ

以上　flex要素の横並びの高さを揃えるでした。
flexは奥が深いですね。