Flexbox在Safari中不工作，在Web检查器中出现 [英] Flexbox does not work in Safari, striked out in Web inspector

问题描述

我使用 display：flexbox 为一个div容器cointaining一些正方形（使他们水平对齐），它在Chrome中正常工作，但不是在Safari 8.0中，它会像这样敲击：

I'm using display: flexbox for a div container cointaining a number of squares (to make them align nicely horizontally), and it works fine in Chrome, but not in Safari 8.0, where it's striked out like this:

#grid {
    overflow-x: hidden;
    overflow-y: scroll;

    position: absolute;
    top: 55px;
    left: 415px;
    bottom: 10px;
    right: 10px;

    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.square {
    width: 166px;
    height: 185px;
    position: relative;
    cursor: pointer;
    background-size: 166px 125px !important;
    background-repeat: no-repeat !important;
    background: #FFF;
    margin-right: 20px;
    float: left;
}

推荐答案

safari支持

#grid {
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 55px;
    left: 415px;
    bottom: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
}

这篇关于Flexbox在Safari中不工作，在Web检查器中出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！