【完全版】Flexboxで高さを揃える方法まとめ

2025年12月7日2025年12月13日

「カードレイアウトのテキスト・画像を変えたらレイアウトが崩れた…」
Flexbox でレイアウトしていると、ほぼ確実にぶつかるのが「高さをどう揃えるか」の問題です。

結論として、対処方法はコードの状況によって変わります。

align-items が原因で崩れている
height 指定が原因
中のコンテンツ配置が原因

…等

元々あるコードの構成をなるべく変えず、高さを揃える方法をまとめました。

あらゆる状況で対処できる横並びレイアウトはこちらの記事で紹介しているので、ゼロから構築したい場合はこちらの記事を参考にしてください。

Flexbox で高さを揃える基本

Flex コンテナ（親　display: flex;を書いている要素）で

.parent {
  display: flex;
  align-items: stretch; /* これがキモ */
}

とすると、子要素の高さが自動で揃います。
align-items: stretch は初期値なのでわざわざ指定する必要はありませんが、意識しておくと設計が楽になります。

このとき、子の .child に高さ指定は不要です。

つまり、align-itemsの値を上書きしている場合に子要素の高さが変わってしまうのです。

`align-items`が原因で崩れている場合

原因：`align-items`を上書きしている

初期値のalign-items: stretchであれば高さは自動で揃うはずなので、揃っていないという場合は上書きしている可能性があります。

例えば、子要素を中央揃えにする為に、親要素にalign-items: centerを指定したケースです。

対処：子要素にflexを指定

この場合は、親要素は初期値のalign-items: stretchに戻し、子要素に中央揃えの指定をします。

.parent {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.child {
  flex:1;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 /* ↓中身を縦方向フレックスに */
    display: flex;
  flex-direction: column;
  justify-content: center;
}

height 指定が原因の場合

原因：`height`を固定している

古いサイトでは高さを揃える為に子要素や親要素の高さをheight: 200pxなどで固定していることがありますが、この方法はレイアウトが崩れる大きな原因になります。

.child {
  height: 200px;
}

対処：高さ指定削除、Flex の stretch に任せる

高さの指定を削除し、Flexの初期値に自動で高さを合わせてもらいましょう。

.parent {
  display:flex;
  align-items:stretch;
}
.child {
  /* height 指定なし */
}

これでレイアウトが崩れてしまう場合は、応急処置的にmin-heightに置き換えることで対処できることもあります。

.child {
  /* height: 200px; */
  min-height: 200px;
}

また、中身を中央揃えにしたいならchild 側で制御する方法も試してみてください。

高さを固定した前提でレイアウトを組んでしまっている場合は、上記対処だけでは解決しない場合があります。
どうしても解決できない場合はこちらまでご相談ください。

原因：`height`を固定している

.child {
  height: 200px;
}

対処：高さ指定削除、Flex の stretch に任せる

高さの指定を削除し、Flexの初期値に自動で高さを合わせてもらいましょう。

.parent {
  display:flex;
  align-items:stretch;
}
.child {
  /* height 指定なし */
}

これでレイアウトが崩れてしまう場合は、応急処置的にmin-heightに置き換えることで対処できることもあります。

.child {
  /* height: 200px; */
  min-height: 200px;
}

また、中身を中央揃えにしたいならchild 側で制御する方法も試してみてください。

中のコンテンツ配置が原因の場合

原因：コンテンツが上揃えになっている

本来align-items: stretchなどで子要素の高さは揃ってるのに、中のコンテンツの配置がバラバラで高さが揃ってない様に見えている状態です。
例）タイトル、テキスト、ボタンが上揃えになっているので枠の高さは合っていても配置がバラバラに見える。

対処：カード全体を縦方向の flex にする

子要素にdisplay :flexを追加し、縦揃えで組み込み、さらに下揃えにしたいボタンにmargin-top: auto;を指定する。

これで見た目を整えることができます。

応用

この場合、ボタンの位置は揃っても「タイトル」「テキスト」の高さはコンテンツ依存のままで、カード毎の高さはバラバラのままです。

「タイトル」「テキスト」「ボタン」など、子要素の全ての高さを各カードで揃えたい場合は、CSSだけでは再現が難しいです。

Gridレイアウト+matchHeight.jsを活用することで完璧に高さの揃ったカードレイアウトを作成することができます。詳しい実装方法はこちらで紹介しています。→【最強の横並びレイアウト】完全レスポンシブ＆柔軟なコーディング方法

まとめ

Flexbox のレイアウトは便利な反面、高さ揃えや折り返し、内部要素の配置の影響で崩れやすい という弱点があります。

この記事で紹介したポイントを押さえておけば、多くの “崩れ方” は自力で解決できるはずです。

古いコードやプラグイン・JSを多用したサイトの場合、Flexの原則が働かないケースもあります。その場合は、設計を見直すか別の原因を探る必要が出てきます。

どうしても自力で解決できない場合はこちらまでご相談ください。→お問い合わせ

【完全版】Flexboxで高さを揃える方法まとめ

Flexbox で高さを揃える基本

align-itemsが原因で崩れている場合

原因：align-itemsを上書きしている

対処：子要素にflexを指定

height 指定が原因の場合

原因：heightを固定している

対処：高さ指定削除、Flex の stretch に任せる

原因：heightを固定している

対処：高さ指定削除、Flex の stretch に任せる

中のコンテンツ配置が原因の場合

原因：コンテンツが上揃えになっている

対処：カード全体を縦方向の flex にする

応用

まとめ

関連記事

`align-items`が原因で崩れている場合

原因：`align-items`を上書きしている

原因：`height`を固定している

原因：`height`を固定している