要素の高さを揃えたいときはFlexboxを使えば孫要素まで高さを揃えることができる

要素を横並びにしたときに高さを揃えたいというときがあると思います。

やっぱ高さが揃っていると見た目もきれいですし整ってみえますよね。

cssで高さを合わせる方法はいくつかありますが簡単な方法としてはFlexboxを使った方法です。

基本的には親要素にflexboxをかけるだけだからとても簡単です。

Flexboxで高さを合わせる

flexboxの使い方はとても簡単です。親要素にflexboxをかければ子要素の高さが揃うようになります。

html

css

ul{
	display: flex;
	flex-wrap: wrap;
}

上記は基本的なflexboxの使い方の記述です。

子要素だけでなく孫要素までFlexboxで高さを合わせたい

flexboxを使えば子要素だけでなく孫要素まで高さを合わせることができます。

html

<ul class="list">
	<li><a href="#"><span>テキストテキスト</span></a></li>
	<li><a href="#"><span>テキストテキストテキストテキストテキストテキストテキストテキストテキ</span></a></li>
	<li><a href="#"><span>テキスト</span></a></li>
	<li><a href="#"><span>テキストテキストテキストテキストテキストテキスト</span></a></li>
	<li><a href="#"><span>テキスト</span></a></li>
</ul>   

css

ul.list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

ul.list li {
	display: flex;
	align-items: stretch;
	width: 190px;
	margin-bottom: 10px;
	margin-right: 10px;
}

ul.list li a {
	display: flex;
	align-items: center;
	width: 190px;
	font-size: 16px;
	color: #000;
	text-decoration: none;
	padding: 9px 10px;
	text-align: left;
	border: solid 1px #ccc;
}

サンプル