仕事・技術 トップページ(101記事)

Edgeでdisplay : flex が適用された要素の上下マージンや上下パディングが効かない時の解決方法

Edgeでdisplay:flex;に指定した要素にflex-wrap:wrap;を使ったところ、上下マージンが効いていないことが判明。解決策は「疑似要素」を使うことでした。

解決策は以下のとおり。

.item::after {
    content: '';
    display: block;
    margin: 10% 0 0;
}

この問題はEdgeやfirefoxで発生するそうです。

バグかと思いましたが、どうやらEdgeやfirefoxではflexアイテムの縦サイズの計算方法が違うのだとか。ブラウザの仕様なのですね。

仕事・技術 トップページ(101記事)

ページの先頭へ