コーディングの困ったを解決

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

flex要素を横並びにする方法

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

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

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

2024/1/18    ,

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

「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%」が聞かないんですね。

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

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

HTMLの理解を深めたいあなたへオススメ!

おすすめ

7000本の授業が見放題!社会人向けオンライン学習動画【Schoo(スクー)】

『シン・ブログ』は、国内トップシェアを誇るCMSである「WordPress」をベースとした、 無料で利用可能なブログ作成、運用サービスです。

  • 365日配信される参加型生放送授業が無料
  • チャットで業界の気軽に質問できる
  • 月/980円で今までの授業がどれでも見放題!
  • WEB制作や、プログラミング講座も多彩な講座が用意されています。

\ まずは無料授業を体験! /

【Schoo(スクー)】

オシャレなサイトなので、是非一度ご覧ください。

-コーディングの困ったを解決
-, ,