Flexbox support for 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

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

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

Safari 5也不支持包装，因此不会有响应能力。safari 6.1+确实支持使用-webkit-前缀的此属性，但它仅适用于mac。

如果你真的想要响应能力，你可以尝试制作一个带有媒体查询和浮动的网格。这是我举的一个例子：

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

.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...*/

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

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

---

你能做的最好的事情就是使用modernizr将flexbox和响应网格结合起来。你用flexbox制作你的风格，但当modernizr检测到没有flexbox时，你可以使用响应网格作为修复（或者使用网格，当modernizer检测到.flexbox时，使用flexbox。你可以选择）

http://jsfiddle.net/msf67Lum/

.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...*/

<!--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>

这个例子在支持flexbox的情况下可以使用它，但在safari（或不支持的情况下）中，它是使用网格

Answer 2

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

display: -webkit-flex;

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

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