高さが合わない？flexで高さを揃える最も簡単な方法【コピペOK】

ニャンコ

flexで横並びにしたのに、高さがバラバラで困る…

そんな悩みを解決するために、子要素の高さを正しく揃える方法を初心者にもわかりやすく解説します。

ワンコ

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

高さを揃える基本のCSS

flexで高さを揃えるには、親要素に以下のCSSを指定します。

実は、align-itemsの初期値はstretchなので、
この状態だけで子要素の高さは「一番高い要素に揃えて」自動調整されます。

.flex {
  display: flex;
}

flexで高さが揃わない原因

でもなぜ、上記の通りにflexを指定しているのに高さが揃わないのか..
原因は大まかに２つあります。

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

まず1つ目は align-items プロパティを使用した例です。
align-items は、flexレイアウトで「交差軸（通常は縦方向）」の位置揃えを決めるプロパティです。
横並び（row方向）の場合、子要素の上下の位置をコントロールします。

デフォルトでは 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 {
  display:flex;

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

そして、align-items: centerを削除したものが下記になります。
先述したようにalign-itemsプロパティの初期値はstretchなので自動的に高さが揃いました。

高さが揃いました！

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

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

.wrap {
  display:flex;
}

.btn {
  /*height: 100%を指定している*/
  height: 100%;
}

height: 100% を子要素に指定しても、align-items: stretchを使っていて高さが揃わない場合があります。

これは、height: 100% が親要素の高さを基準にした相対指定だからです。
親である .wrap 要素に height が指定されていないと、子要素はどれだけの高さを100%とすればよいかわからず、結果的に高さが適用されません。

このようなケースでは、子要素にheight: 100% を指定するのではなく、親に display: flex; と align-items: stretch; を設定し、子要素には高さを指定しないのが正しいやり方です。

.btn {
  /*height: 100%;*/
}

子要素のボタンやテキストの位置も揃えたいときは？

ニャンコ

高さ揃ったのに、中身のテキスの位置がそろってないよお...

子要素の位置を揃えるにはさらに工夫が必要です。

ワンコ

子要素の中でテキスト等の位置を揃えるには、子要素自身にflexを設定するのが定番です。

.wrap {
  display:flex;
}

.btn {
    /* 子要素にも flex を指定する */  
    display: flex;
    align-items: center;
    justify-content: center;
}

子要素にもflexを指定することで、それぞれの子要素のテキストを真ん中に揃えることができました。

ワンコ

よくある質問（FAQ）

align-items: stretch; は書かなくてもいいの？

初期値なので省略しても構いませんが、CSSリセットや他の指定で変わっていることがあるため、明示推奨です。

JavaScriptは使わなくてOK？

はい、CSSだけで高さ揃えは実現できます。軽量で高速です。

ボタンやテキストの位置まで揃えるには？

子要素にもflexを指定することで実現ができます。

まとめ：高さが揃わない原因は“たったひとつの見落とし”かも？

Flexboxはとても便利なレイアウト手法ですが、高さが揃わないというトラブルは意外と多くの人が経験します。

その多くは、
「align-itemsの指定」
「不要なheight: 100%」
「内部の構造の崩れ」
といったちょっとした見落としが原因です。

今回ご紹介したテクニックやチェックポイントを押さえておけば、美しく揃ったレイアウトはすぐに実現できます。

大事なのは、“力技”でCSSを足すのではなく、原理を理解してスマートに直すこと。

そして、こうした細かな理解の積み重ねが、「CSSわかってる人」への第一歩になります。