CommentOut

【CSS】flex-boxで高さを揃える方法 【CSS】flex-boxで高さを揃える方法

【CSS】flex-boxで高さを揃える方法

公開日:  最終更新日:

display: flexが使われているCSSを見る機会が増えてきましたね。
flexを使うことで、レイアウトの組み換えや順番の入れ替え、隙間を開けるのだって簡単に出来るので、非常に便利ですよね。

flexを使えば、inline-blockでは面倒だった、各子要素の高さを揃えるのだって簡単にできてしまいます。

flex-boxでは自動で高さが揃う

そもそもflex-boxでは子要素の高さは同じになるように自動調節されます。

以下のサンプルを見てください。

See the Pen flexで高さを揃える方法 by Uilou (@uilou754) on CodePen.

CSSには高さを指定したり、揃えるようなスタイル指定はありません。

.flex {
	display: flex;
	flex-direction: row;
	gap: 30px;
	
	> .flex-child {
		display: block;
		flex: 1;
		padding: 15px;
		background: #ccc;
	}
}

flexの向きをrowにしておくと、各子要素の高さは自動で揃います。
これはblock要素でもinline要素でも同じで、自動で高さが揃います。

なぜflexで高さがずれる?高さが変わる理由

でも、この記事を読んでいる方は、高さが揃っていないはずです。
もちろん理由があって高さが揃わなくなっているんですね。

以下のサンプルを見てください。

See the Pen Flexで高さが揃わない例 by Uilou (@uilou754) on CodePen.

高さが揃っていませんね。
先ほどのCSSを見比べてみましょう。

【高さが揃っているflexのCSS】

.flex {
	display: flex;
	flex-direction: row;
	gap: 30px;
	
	> .flex-child {
		display: block;
		flex: 1;
		padding: 15px;
		background: #ccc;
	}
}

【高さが揃わないflexのCSS】

.flex {
	display: flex;
	flex-direction: row;
	gap: 30px;
	align-items: flex-start;
	
	> .flex-child {
		display: block;
		flex: 1;
		padding: 15px;
		background: #ccc;
	}
}

違いはalign-itemsを指定しているか、していないかだけの違いです。
align-itemsが入ると高さがコンテンツの高さになってしまうんですね。

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。