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;
}

結果