CSS | display: flexで子要素の高さを揃えない方法

CSS,CSS フレックスボックス

CSSのFlexBox(フレックスボックス)で横並びにした子要素の高さを揃えない方法とサンプルコードを紹介しています。

display: flexで子要素の高さを揃えない

See the Pen CSS Make child elements fixed width (display:flex) by yochans (@yochans) on CodePen.

HTMLにはコンテナ要素とするclass名「container」と横に並べる子要素を<div>タグで設置しています。

<div class="container">
	<div>aaa<br>bbb</div>
	<div>aaa<br>bbb<br>ccc</div>
	<div>aaa</div>
	<div>aaa<br>bbb<br>ccc<br>eee</div>
</div>

FlexBoxで並べる子要素の高さを揃えないようにする場合は「display: flex;」と一緒に「align-items: flex-start;」を指定します。

「align-items: flex-start;」は並べる子要素の高さ(縦向きの場合は幅)を最大値で固定しないようにする指定値です。

各子要素の高さはそれぞれの持つ高さに依存するようになります。

例えば個別に疑似クラス「:nth-child(n)」を使って高さ「height」を指定する事なく、中身のサイズのよって依存する高さにすることが可能になります。

.container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1px;
}

.container div {
	width: 60px;
	padding: 5px;
	color:#FFF;
	background: #1e90ff;
}

CSS,CSS フレックスボックス

Posted by Yousuke.U