Flexbox支持Safari

Question

我有以下Flexbox代码，它在Chrome和Firefox中运行良好，但在Safari（任何版本）中效果不佳。我尝试过特定的前缀但无法实现相同的简单顺序。我应该为Safari修改/添加什么，以便它能像Chrome和Firefox一样正常工作？

JSFiddle

.container {
    display: -webkit-flexbox;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex-direction: row;
    -webkit-flex-direction: row;
    list-style:none;
}
li {
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    -webkit-flex-grow: 3;
    flex-grow: 3;
}

<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

Answer 1

Safari 5（safari的最新Windows版本）仅支持具有旧语法和-webkit-前缀的flexbox。 （display:-webkit-box）

http://caniuse.com/#search=flexbox

＆＃13;

＆＃13;

.container {
    display: -webkit-box; /*safari*/
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap; /* Safari 6.1+ */
    justify-content: space-around;
    flex-direction: row;
    -webkit-flex-direction: row;
    list-style:none;
}
li {
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    flex-grow: 3;
}

＆＃13;

<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Safari 5也不支持包装，因此响应性不会在那里。 safari 6.1+使用-webkit-前缀支持此属性，但它仅适用于mac。

如果您真的想要响应，可以尝试使用媒体查询和浮点数制作网格。这是我做的一个例子：

https://jsfiddle.net/pvLsw09u/2/

＆＃13;

＆＃13;

.container {
    list-style:none;
    width:100%;
    overflow: hidden;
    padding:0;
    background: salmon; /*same color as border. just to look better*/
}

.container li {
    box-sizing:border-box;
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    width:100%;
    float:left;
    margin:0;
}
/*media queries*/
@media (min-width: 480px)
{
    .container li {
        width: 50%;
    }
}

@media (min-width: 640px)
{
    .container li {
        width: 33%;
    }
}

@media (min-width: 768px)
{
    .container li {
        width: 25%;
    }
}

@media (min-width: 1024px)
{
    .container li {
        width: 20%;
    }
}

@media (min-width: 1280px)
{
    .container li {
        width: 15%;
    }
}

@media (min-width: 1824px)
{
    .container li {
        width: 10%;
    }
}

/*etc...*/

＆＃13;

<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

它不如flexbox那么完美，但它是一个很好的替代品。

---

您可以做的最好的事情是使用modernizr将flexbox和响应式网格结合起来。 您使用flexbox制作样式，但是当modernizr检测到.no-flexbox时，您可以使用响应式网格作为修复（或使用网格，当modernizr检测到.flexbox时，使用flexbox。您可以选择）

http://jsfiddle.net/msf67Lum/

＆＃13;

＆＃13;

.container {
    list-style:none;
    width:100%;
    overflow: hidden;
    padding:0;
    background: salmon; /*same color as border. just to look better*/
    /*flexbox*/
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex-direction: row;
    -webkit-flex-direction: row;
}

.container li {
    box-sizing:border-box;
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    margin:0;
    flex-grow: 3;
}

.no-flexbox .container li
{
    width:100%;
    float:left;
}

/*media queries*/
@media (min-width: 480px)
{
    .no-flexbox .container li {
        width: 50%;
    }
}

@media (min-width: 640px)
{
    .no-flexbox .container li {
        width: 33%;
    }
}

@media (min-width: 768px)
{
    .no-flexbox .container li {
        width: 25%;
    }
}

@media (min-width: 1024px)
{
    .no-flexbox .container li {
        width: 20%;
    }
}

@media (min-width: 1280px)
{
    .no-flexbox .container li {
        width: 15%;
    }
}

@media (min-width: 1824px)
{
    .no-flexbox .container li {
        width: 10%;
    }
}

/*etc...*/

＆＃13;

<!--make sure to include modernizr!-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

此示例适用于受支持的flexbox，但在safari中（或不支持时）则使用网格

Answer 2

您需要为显示添加webkit前缀：

display: -webkit-flex;

https://css-tricks.com/using-flexbox/

http://caniuse.com/#feat=flexbox