Flexboxで横並び&中央寄せにした時、要素の高さが揃わない問題の対処法 WEBデザイン

Flexboxで高さが揃わない場合の直し方。横並び&中央揃えにする正しい記述

画像とテキストを横並びにして、なおかつ上下中央揃えにしたい時、どうやってコーディングしていますか?

Flexboxを使ってレイアウトする方が多いのではないでしょうか。
とても便利で、中央寄せも簡単にできるのですが、思わぬ落とし穴があります。

こんな風に、高さがそろわないレイアウトになってしまったこと、ありませんか…?

「Flexboxじゃこのレイアウトできないのか」って諦めないでください。
ちゃんと高さをそろえる方法はあります。

スポンサーリンク

まずは普通に組んでみる

HTML

<div class="example">
	<figure><img src="" alt="画像"></figure>
	<div class="txt">
		<h1>タイトル</h1>
		<p>テキストテキストテキストテキストテキスト</p>
	</div>
</div>

CSS

.example {
	display: flex;
	align-items: center;
}
.example .txt {
	background-color: #fff;
	padding: 30px;
}

ブラウザによってベンダープレフィックスが必要になります。
2019年最新のベンダープレフィックスは下記記事をご覧ください。

結果

この組み方だと下図のように、高さがそろわなくなります。

スポンサーリンク

解決策

HTML

<div class="example">
	<figure><img src="" alt="画像"></figure>
	<div class="txt">
		<div>
			<h1>タイトル</h1>
			<p>テキストテキストテキストテキストテキスト</p>
		</div>
	</div>
</div>
  • <h1>タグと<p>タグをさらに<div>タグで囲う

CSS

.example {
	display: flex;
}
.example .txt {
	background-color: #fff;
	padding: 30px;
	display: flex;
	align-items: center;
}
  • .example に指定していた「align-items: center;」を外す
  • .example .txt に「display:flex;」と「align-items: center;」を追加

結果

これで理想のレイアウトになります!
きちんと高さがそろっていますね!

「align-items: center;」は親要素ではなく子要素に指定するのが正解でした。
ただ、親要素の「display: flex;」を外すと崩れてしまうので、どちらにも指定することがポイントです。

あえて要素同士の高さを揃えたくない場合は、以下を参考にしてください。

スポンサーリンク

まとめ

Flexboxはとても便利ですが、扱いが難しく、このように意図しない現象に遭遇してしまうこともあります。
こんな意外な解決方法があるので、悩んでいた方、是非ご覧ください。

「Flexbox」の関連記事一覧