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 {
	display: flex;
	flex-direction: row;
	gap: 30px;
	
	> .flex-child {
		display: block;
		flex: 1;
		padding: 15px;
		background: #ccc;
	}
}

.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が入ると高さがコンテンツの高さになってしまうんですね。