要素の高さを揃えたいときは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;
}

サンプル

コメント

タイトルとURLをコピーしました