flexboxとmatchHeightを掛け合わせると子要素の上下の余白が不揃いに。

FLEXBOXを使って要素を横並びにすると、子要素の上下方向の余白が左右均等にならない時がある。

親要素には下記CSSを記述。

.flexBox {
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

左の要素と右の要素とでは、子要素のliの高さが同じになっておらず、若干、右側の要素のliの方が余白が多いように見える。

解決方法

親要素にalign-content: flex-startを追加。

フレックスボックスにalign-contentを追加して、ULの子要素の開始位置を上方向に揃えることで解決できます。

.flexBox {
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-content: flex-start;
}

結果

 

ホームページ制作の
お問い合わせ

Y desIgnのサービスは全国対応可!

全国
対応

遠方の企業様にLINEやzoomなどのビデオ会議ツールを活用させていただくことで日本全国のお客様へのサービス提供を可能としております。

ホームページを作りたいと
お伝えください

受付時間
平日火曜~金曜 10:00~17:00

0586-52-5113