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

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

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

完全無料スクールPR

これから始めるWEB制作

初心者のための【ZeroPlus Gate】

ワンコ

「ZeroPlus Gate」は、30日間限定で完全無料で学べるプログラミングスクールです。

その名の通り、WEB制作を「0」からスタートする初心者に特化したカリキュラムを提供しています。
分かりやすい動画講座を通じて、プログラミング未経験者でもスムーズにWEB制作を学ぶことが可能です。

さらに、わからない点があれば何度でも質問し放題！独学で行き詰まってしまった方にも最適な環境が整っています。
加えて、カウンセリングを通じて、将来的なキャリア設計や学習の進め方についてもアドバイスを受けることができます。

ワンコ

私自身、このスクールを受講しましたが、正直なところ「なぜこれが無料なのか？」と驚くほど充実したカリキュラムでした。独学でWEB制作を学んでいた頃と比べ、理解度が圧倒的に向上したと実感しています。

有料スクールへの勧誘も一切なく、安心して気軽に学習を始められるのが魅力的です。

ポイント

・完全無料で利用できる（マジで無料です）
・30日間限定でWeb制作の動画講座を見放題
・専属メンターが面談で学習をサポート
・Slackで講師に何回でも質問できる
・しつこい勧誘もなし！

\ 完全無料で学んでみる /

無料受講はこちらから

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

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

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

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

<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です。

高さが揃いました！

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は奥が深いですね。